@brightspace-ui/core 3.52.0 → 3.52.1

package/README.md

@@ -73,7 +73,6 @@ npm install @brightspace-ui/core
   * [LabelledMixin](mixins/labelled/): label custom elements by referencing elements across DOM scopes
   * [LocalizeMixin](mixins/localize/): localize text in your components
   * [ProviderMixin](mixins/provider/): provide and consume data across elements in a DI-like fashion
-  * [RtlMixin](mixins/rtl/): enable components to define RTL styles
   * [SkeletonMixin](components/skeleton/): make components skeleton-aware
   * [VisibleOnAncestorMixin](mixins/visible-on-ancestor/): display element on-hover of an ancestor
 * Templates

package/components/inputs/README.md

@@ -19,13 +19,12 @@ Groups of inputs (like checkboxes or radios) should be wrapped in a `<fieldset>`
 
 ### Visible labels using the `<label>` element
 
-Import the label styles and `RtlMixin` and include them in your component:
+Import the label styles and include them in your component:
 
 ```javascript
-import {inputLabelStyles} from '@brightspace-ui/core/components/inputs/input-label-styles.js';
-import {RtlMixin} from '@brightspace-ui/core/mixins/rtl/rtl-mixin.js';
+import { inputLabelStyles } from '@brightspace-ui/core/components/inputs/input-label-styles.js';
 
-class MyElem extends RtlMixin(LitElement) {
+class MyElem extends LitElement {
 
   static get styles() {
     return inputLabelStyles;

package/components/inputs/docs/input-radio.md

@@ -14,7 +14,6 @@ Unlike checkboxes, individual radio buttons cannot be placed in a custom element
 
 As a result, we have to apply styles to native radio inputs.
 
-Note: in order for RTL to function correctly, make sure your component uses the `RtlMixin`.
 
 ## Best Practices
 <!-- docs: start best practices -->
@@ -39,10 +38,9 @@ For disabled items, add the `d2l-input-radio-label-disabled` class on the label
 ```html
 <script type="module">
   import { html, LitElement } from 'lit';
-  import { RtlMixin } from '@brightspace-ui/core/mixins/rtl/rtl-mixin.js';
   import { radioStyles } from '@brightspace-ui/core/components/inputs/input-radio-styles.js';
 
-  class MyRadioElem extends RtlMixin(LitElement) {
+  class MyRadioElem extends LitElement {
 
     static get styles() {
       return radioStyles;

package/components/inputs/input-radio-styles.js

@@ -61,14 +61,10 @@ export const radioStyles = css`
 		line-height: 1.2rem;
 		margin-bottom: 0.9rem;
 		overflow-wrap: anywhere;
-		padding-left: 1.7rem;
-		padding-right: 0;
+		padding-inline-end: 0;
+		padding-inline-start: 1.7rem;
 		vertical-align: middle;
 	}
-	:host([dir="rtl"]) .d2l-input-radio-label {
-		padding-left: 0;
-		padding-right: 1.7rem;
-	}
 	.d2l-input-radio-label-disabled {
 		opacity: 0.5;
 	}
@@ -82,12 +78,7 @@ export const radioStyles = css`
 	.d2l-input-radio-label > .d2l-input-radio,
 	.d2l-input-radio-label > input[type="radio"] {
 		flex: 0 0 auto;
-		margin-left: -1.7rem;
-		margin-right: 0.5rem;
-	}
-	:host([dir="rtl"]) .d2l-input-radio-label > .d2l-input-radio,
-	:host([dir="rtl"]) .d2l-input-radio-label > input[type="radio"] {
-		margin-left: 0.5rem;
-		margin-right: -1.7rem;
+		margin-inline-end: 0.5rem;
+		margin-inline-start: -1.7rem;
 	}
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.52.0",
+  "version": "3.52.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",