@brightspace-ui/core 3.137.3 → 3.138.0

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/components/tabs/README.md

@@ -129,8 +129,8 @@ An element that displays the corresponding tab panel when selected.
 
 | Slot | Description |
 |--|--|
-| `before` | Slot for content to be displayed before the tab text |
-| `after` | Slot for content to be displayed after the tab text |
+| `before` | Slot for content to be displayed before the tab text. Supports `d2l-icon`, `d2l-icon-custom`, and `d2l-count-badge`. Only the *first* item assigned to this slot will be shown. |
+| `after` | Slot for content to be displayed after the tab text. Supports `d2l-icon`, `d2l-icon-custom`, and `d2l-count-badge`. Only the *last* item assigned to this slot will be shown. |
 
 ### Events
 - `d2l-tab-content-change`: Dispatched when the text attribute is changed. Triggers virtual scrolling calculations in parent `d2l-tabs`.

package/components/tabs/tab.js

@@ -6,8 +6,8 @@ import { TabMixin } from './tab-mixin.js';
 /**
  * @attr {string} id - REQUIRED: Unique identifier for the tab
  * @fires d2l-tab-content-change - Dispatched when the text attribute is changed. Triggers virtual scrolling calculations in parent d2l-tabs.
- * @slot before - Slot for content to be displayed before the tab text
- * @slot after - Slot for content to be displayed after the tab text
+ * @slot before - Slot for content to be displayed before the tab text. Supports `d2l-icon`, `d2l-icon-custom`, and `d2l-count-badge`. Only the *first* item assigned to this slot will be shown.
+ * @slot after - Slot for content to be displayed after the tab text. Supports `d2l-icon`, `d2l-icon-custom`, and `d2l-count-badge`. Only the *last* item assigned to this slot will be shown.
  */
 class Tab extends TabMixin(LitElement) {
 
@@ -59,6 +59,16 @@ class Tab extends TabMixin(LitElement) {
 			:host([skeleton]) .d2l-tab-content.d2l-skeletize::before {
 				inset-block: 0.15rem;
 			}
+
+			/**
+			 * Only allow d2l-icon, d2l-count-badge, and d2l-icon-custom in the before/after slots
+			 * Only show the first item in the before slot and the last item in the after slot
+			 */
+			::slotted([slot]:not(d2l-icon):not(d2l-count-badge):not(d2l-icon-custom)),
+			::slotted([slot="before"]:not(:first-child)),
+			::slotted([slot="after"]:not(:last-child)) {
+				display: none;
+			}
 		`];
 
 		super.styles && styles.unshift(super.styles);

package/custom-elements.json

@@ -13799,11 +13799,11 @@
       "slots": [
         {
           "name": "before",
-          "description": "Slot for content to be displayed before the tab text"
+          "description": "Slot for content to be displayed before the tab text. Supports `d2l-icon`, `d2l-icon-custom`, and `d2l-count-badge`. Only the *first* item assigned to this slot will be shown."
         },
         {
           "name": "after",
-          "description": "Slot for content to be displayed after the tab text"
+          "description": "Slot for content to be displayed after the tab text. Supports `d2l-icon`, `d2l-icon-custom`, and `d2l-count-badge`. Only the *last* item assigned to this slot will be shown."
         }
       ]
     },

package/package.json

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