@brightspace-ui/core 3.151.1 → 3.151.3

package/components/button/button-add.js

@@ -9,7 +9,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const MODE = {
 	icon: 'icon',
@@ -21,7 +20,7 @@ const whiteAddButtonBackgroundFlag = getFlag('GAUD-7495-add-button-white-backgro
 /**
  * A component for quickly adding items to a specific locaiton.
  */
-class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(LitElement)))) {
+class ButtonAdd extends PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(LitElement))) {
 	static get properties() {
 		return {
 			/**
@@ -119,39 +118,32 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 			@media (prefers-reduced-motion: no-preference) {
 				button:hover .line,
 				button:focus .line {
-					transition: all var(--d2l-button-add-animation-duration) ease-in var(--d2l-button-add-animation-delay);
-				}
-				button:hover .line,
-				button:focus .line,
-				:host([dir="rtl"]) button:hover .line-end,
-				:host([dir="rtl"]) button:focus .line-end {
 					animation: line-start-animation var(--d2l-button-add-animation-duration) ease-in var(--d2l-button-add-animation-delay) 1 forwards;
+					transition: all var(--d2l-button-add-animation-duration) ease-in var(--d2l-button-add-animation-delay);
 				}
 				button:hover .line-end,
-				button:focus .line-end,
-				:host([dir="rtl"]) button:hover .line-start,
-				:host([dir="rtl"]) button:focus .line-start {
+				button:focus .line-end {
 					animation-name: line-end-animation;
 				}
 
 				@keyframes line-start-animation {
 					0% {
-						background: linear-gradient(to right, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) left center / 113%;
+						background: linear-gradient(to var(--d2l-inline-end, right), var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) var(--d2l-inline-start, left) center / 113%;
 						opacity: 10%;
 					}
 					100% {
-						background: linear-gradient(to right, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) left center / 113%; /* safari */
-						background-position: right;
+						background: linear-gradient(to var(--d2l-inline-end, right), var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) var(--d2l-inline-start, left) center / 113%; /* safari */
+						background-position: var(--d2l-inline-end, right);
 					}
 				}
 				@keyframes line-end-animation {
 					0% {
-						background: linear-gradient(to left, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) right center / 113%;
+						background: linear-gradient(to var(--d2l-inline-start, left), var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) var(--d2l-inline-end, right) center / 113%;
 						opacity: 10%;
 					}
 					100% {
-						background: linear-gradient(to left, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) right center / 113%; /* safari */
-						background-position: left;
+						background: linear-gradient(to var(--d2l-inline-start, left), var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) var(--d2l-inline-end, right) center / 113%; /* safari */
+						background-position: var(--d2l-inline-start, left);
 					}
 				}
 			}

package/components/card/card-footer-link.js

@@ -5,13 +5,12 @@ import { css, html, LitElement } from 'lit';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * An icon link that can be placed in the `footer` slot.
  * @slot tooltip - slot for the link tooltip
  */
-class CardFooterLink extends FocusMixin(RtlMixin(LitElement)) {
+class CardFooterLink extends FocusMixin(LitElement) {
 
 	static get properties() {
 		return {

package/components/link/link-mixin.js

@@ -61,7 +61,7 @@ export const LinkMixin = superclass => class extends LocalizeCoreElement(supercl
 		return html`<a
 			aria-label="${ifDefined(ariaLabel)}"
 			class="${classMap(linkClasses)}"
-			download="${this.download}"
+			download="${ifDefined(this.download)}"
 			href="${ifDefined(this.href)}"
 			target="${ifDefined(this.target)}"
 			rel="${ifDefined(rel)}"

package/components/typography/styles.js

@@ -505,13 +505,15 @@ export const baseTypographyStyles = css`
 	${unsafeCSS(fontFacesCss)}
 	html {
 		--d2l-document-direction: ltr;
-		--d2l-mirror-transform: none;
 		--d2l-inline-end: right;
+		--d2l-inline-start: left;
+		--d2l-mirror-transform: none;
 	}
 	html[dir="rtl"] {
 		--d2l-document-direction: rtl;
-		--d2l-mirror-transform: scale(-1, 1);
 		--d2l-inline-end: left;
+		--d2l-inline-start: right;
+		--d2l-mirror-transform: scale(-1, 1);
 	}
 
 	.d2l-typography {

package/package.json

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