@brightspace-ui/core 3.137.3 → 3.137.4

package/components/card/card.js

@@ -1,11 +1,9 @@
 import '../colors/colors.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 /**
@@ -16,7 +14,7 @@ import { styleMap } from 'lit/directives/style-map.js';
  * @slot footer - Slot for footer content, such secondary actions
  * @slot header - Slot for header content, such as course image (no actionable elements)
  */
-class Card extends FocusMixin(RtlMixin(LitElement)) {
+class Card extends LitElement {
 
 	static get properties() {
 		return {
@@ -142,22 +140,14 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 				padding-bottom: 1.2rem;
 			}
 			.d2l-card-actions {
+				inset-inline-end: 0.6rem;
 				position: absolute;
-				right: 0.6rem;
 				top: 0.6rem;
 				/* this must be higher than footer z-index so dropdowns will be on top */
 				z-index: 3;
 			}
-			:host([dir="rtl"]) .d2l-card-actions {
-				left: 0.6rem;
-				right: auto;
-			}
 			.d2l-card-actions ::slotted(*) {
-				margin-left: 0.3rem;
-			}
-			:host([dir="rtl"]) .d2l-card-actions ::slotted(*) {
-				margin-left: 0;
-				margin-right: 0.3rem;
+				margin-inline-start: 0.3rem;
 			}
 			.d2l-card-badge {
 				line-height: 0;
@@ -237,6 +227,7 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 		this.subtle = false;
 		this._active = false;
 		this._dropdownActionOpen = false;
+		this._focusOnFirstRender = false;
 		this._footerHidden = true;
 		this._hover = false;
 		this._tooltipShowing = false;
@@ -244,16 +235,17 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 		this._onFooterResize = this._onFooterResize.bind(this);
 	}
 
-	static get focusElementSelector() {
-		return 'a';
-	}
-
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		const badgeObserver = new ResizeObserver(this._onBadgeResize);
 		badgeObserver.observe(this.shadowRoot.querySelector('.d2l-card-badge'));
 		const footerObserver = new ResizeObserver(this._onFooterResize);
 		footerObserver.observe(this.shadowRoot.querySelector('.d2l-card-footer'));
+
+		if (this._focusOnFirstRender) {
+			this._focusOnFirstRender = false;
+			this.focus();
+		}
 	}
 
 	render() {
@@ -308,6 +300,17 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 		`;
 	}
 
+	focus() {
+		if (!this.hasUpdated) {
+			this._focusOnFirstRender = true;
+			return;
+		}
+
+		const elem = this.shadowRoot.querySelector('a[href]');
+		if (elem) elem.focus();
+		else super.focus();
+	}
+
 	_onBadgeResize(entries) {
 		if (!entries || entries.length === 0) return;
 		const entry = entries[0];

package/package.json

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