@brightspace-ui/core 2.154.1 → 2.155.0

package/components/offscreen/demo/offscreen.html

@@ -29,6 +29,16 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Web Component Using Styles - Forced LTR Container</h2>
+			<d2l-demo-snippet>
+				<template>
+					<span dir="ltr">
+						<p>Some off-screen content:</p>
+						<d2l-offscreen-demo></d2l-offscreen-demo>
+					</span>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/offscreen/offscreen.js

@@ -1,19 +1,20 @@
 import { css, html, LitElement } from 'lit';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
-export const offscreenStyles = css`
-	.d2l-offscreen {
+const offscreenStyleDeclarations = css`
+		direction: var(--d2l-document-direction, ${document.dir === 'rtl' ? css`rtl` : css`ltr`});
 		height: 1px;
 		inset-inline-start: -10000px;
-		left: -10000px;
+		${document.dir === 'rtl' ? css`right` : css`left`}: -10000px;
 		overflow: hidden;
 		position: absolute !important;
 		white-space: nowrap;
 		width: 1px;
-	}
-	:host([dir="rtl"]) .d2l-offscreen {
-		left: 0;
-		right: -10000px;
+`;
+
+export const offscreenStyles = css`
+	.d2l-offscreen {
+		${offscreenStyleDeclarations}
 	}
 `;
 
@@ -25,17 +26,7 @@ class Offscreen extends RtlMixin(LitElement) {
 	static get styles() {
 		return css`
 			:host {
-				height: 1px;
-				inset-inline-start: -10000px;
-				left: -10000px;
-				overflow: hidden;
-				position: absolute !important;
-				white-space: nowrap;
-				width: 1px;
-			}
-			:host([dir="rtl"]) {
-				left: 0;
-				right: -10000px;
+				${offscreenStyleDeclarations}
 			}
 		`;
 	}

package/components/typography/typography.js

@@ -10,6 +10,14 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
 	const style = document.createElement('style');
 	style.id = 'd2l-typography-font-face';
 	style.textContent = `
+		* {
+			--d2l-document-direction: ltr;
+		}
+
+		html[dir="rtl"] * {
+			--d2l-document-direction: rtl;
+		}
+
 		@font-face {
 			font-family: 'Lato';
 			font-style: normal;

package/lang/hi.js

@@ -21,7 +21,7 @@ export default {
 	"components.filter.filters": "फ़िल्टर्स",
 	"components.filter.noFilters": "कोई उपलब्ध फ़िल्टर्स नहीं",
 	"components.filter.searchResults": "{number, plural, =0 {कोई खोज परिणाम नहीं} one {{number} खोज परिणाम} other {{number} खोज परिणाम}}",
-	"components.filter.selectedFirstListLabel": "{headerText}. चुने गए फ़िल्टर सबसे पहले दिखाई देते हैं।",
+	"components.filter.selectedFirstListLabel": "{headerText}. चुने गए फ़िल्टर सबसे पहले दिखाई देते हैं।",
 	"components.filter.singleDimensionDescription": "इसके अनुसार फ़िल्टर करें: {filterName}",
 	"components.form-element.defaultError": "{label} अमान्य है।",
 	"components.form-element.defaultFieldLabel": "फ़ील्ड",

package/lang/nl.js

@@ -1,6 +1,6 @@
 export default {
 	"components.alert.close": "Waarschuwing sluiten",
-	"components.breadcrumbs.breadcrumb": "Broodkruimel",
+	"components.breadcrumbs.breadcrumb": "Kruimelpad",
 	"components.calendar.notSelected": "Niet geselecteerd.",
 	"components.calendar.selected": "Geselecteerd.",
 	"components.calendar.show": "{month} weergeven",

package/package.json

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