improve badge RTL styles

docs/components/badge.md

@@ -142,12 +142,12 @@ One of the most common use cases for badges is attaching them to buttons. To mak
   <sl-badge pill>30</sl-badge>
 </sl-button>
 
-<sl-button style="margin-left: 1rem;">
+<sl-button style="margin-inline-start: 1rem;">
   Warnings
   <sl-badge variant="warning" pill>8</sl-badge>
 </sl-button>
 
-<sl-button style="margin-left: 1rem;">
+<sl-button style="margin-inline-start: 1rem;">
   Errors
   <sl-badge variant="danger" pill>6</sl-badge>
 </sl-button>
@@ -163,14 +163,14 @@ const App = () => (
       <SlBadge pill>30</SlBadge>
     </SlButton>
 
-    <SlButton style={{ marginLeft: '1rem' }}>
+    <SlButton style={{ marginInlineStart: '1rem' }}>
       Warnings
       <SlBadge variant="warning" pill>
         8
       </SlBadge>
     </SlButton>
 
-    <SlButton style={{ marginLeft: '1rem' }}>
+    <SlButton style={{ marginInlineStart: '1rem' }}>
       Errors
       <SlBadge variant="danger" pill>
         6

src/components/button/button.styles.ts

@@ -456,6 +456,12 @@ export default css`
     pointer-events: none;
   }
 
+  .button--rtl ::slotted(sl-badge) {
+    right: auto;
+    left: 0;
+    transform: translateY(-50%) translateX(-50%);
+  }
+
   /*
    * Button spacing
    */

src/components/button/button.ts

@@ -7,6 +7,7 @@ import '../../components/spinner/spinner';
 import { emit } from '../../internal/event';
 import { FormSubmitController } from '../../internal/form';
 import { HasSlotController } from '../../internal/slot';
+import { LocalizeController } from '../../utilities/localize';
 import styles from './button.styles';
 
 /**
@@ -49,6 +50,7 @@ export default class SlButton extends LitElement {
     }
   });
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
+  private readonly localize = new LocalizeController(this);
 
   @state() private hasFocus = false;
 
@@ -181,6 +183,7 @@ export default class SlButton extends LitElement {
           'button--standard': !this.outline,
           'button--outline': this.outline,
           'button--pill': this.pill,
+          'button--rtl': this.localize.dir() === 'rtl',
           'button--has-label': this.hasSlotController.test('[default]'),
           'button--has-prefix': this.hasSlotController.test('prefix'),
           'button--has-suffix': this.hasSlotController.test('suffix')