@brightspace-ui/core 3.143.0 → 3.143.1

package/components/button/button-add.js

@@ -1,10 +1,10 @@
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
 import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getFlag } from '../../helpers/flags.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -105,12 +105,7 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 				0% { position: absolute; }
 				100% { position: static; }
 			}
-
-			button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
-				background-color: white;
-				border-radius: 0.3rem;
-				box-shadow: 0 0 0 2px var(--d2l-button-add-hover-focus-color);
-			}
+			${getFocusRingStyles(pseudoClass => `button:${pseudoClass} d2l-button-add-icon-text`, { extraStyles: css`background-color: white; border-radius: 0.3rem;` })}
 			/* remove when GAUD-7495-add-button-white-background is cleaned up */
 			:host(:not([_white-background-add-button])) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
 				background-color: transparent;
@@ -160,6 +155,15 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 					}
 				}
 			}
+			@media (prefers-contrast: more) {
+				.line {
+					background-color: ButtonBorder;
+				}
+				button:hover .line,
+				button:focus .line {
+					background-color: Highlight !important;
+				}
+			}
 		`;
 	}
 
@@ -215,6 +219,8 @@ class ButtonAddIconText extends VisibleOnAncestorMixin(LitElement) {
 	static get styles() {
 		return [visibleOnAncestorStyles, css`
 			:host {
+				--d2l-focus-ring-offset: 0;
+				--d2l-focus-ring-color: var(--d2l-button-add-hover-focus-color);
 				--d2l-button-add-icon-text-color: var(--d2l-color-galena);
 				align-items: center;
 				display: flex;

package/components/card/card.js

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { getFocusRingStyles } from '../../helpers/focus.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';
@@ -176,23 +177,17 @@ class Card extends LitElement {
 
 			:host([subtle]) {
 				border: none;
+			}
+			:host([subtle][href]) {
 				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03);
 			}
-			:host(:hover) {
+			:host([href]:not([_active]):hover) {
 				box-shadow: 0 2px 14px 1px rgba(0, 0, 0, 0.06);
 			}
-			:host([subtle]:hover) {
+			:host([subtle][href]:not([_active]):hover) {
 				box-shadow: 0 4px 18px 2px rgba(0, 0, 0, 0.06);
 			}
-			:host([_active]) {
-				border-color: transparent;
-				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
-			}
-			:host([_active]:hover),
-			:host([subtle][_active]:hover) {
-				border-color: transparent;
-				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
-			}
+			${getFocusRingStyles(() => ':host([_active])', { 'extraStyles': css`border-color: transparent;` })}
 			/* .d2l-card-link-container-hover is used to only color/underline when
 			hovering the anchor; these styles are not applied when hovering actions */
 			:host([href]) .d2l-card-link-container-hover,
@@ -208,15 +203,16 @@ class Card extends LitElement {
 			:host([_dropdown-action-open]) {
 				z-index: 2;
 			}
-			:host(:not([href])),
-			:host([subtle]:not([href])) {
-				box-shadow: none;
-			}
 			@media (prefers-reduced-motion: no-preference) {
 				:host {
 					transition: box-shadow 0.2s;
 				}
 			}
+			@media (prefers-contrast: more) {
+				:host([subtle]) {
+					border: 1px solid var(--d2l-color-gypsum);
+				}
+			}
 		`];
 	}
 

package/components/count-badge/count-badge-icon.js

@@ -1,9 +1,9 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { CountBadgeMixin } from './count-badge-mixin.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -24,13 +24,7 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
 
 	static get styles() {
 		return [super.styles, css`
-		:host([focus-ring]) d2l-icon,
-		:host(:${unsafeCSS(getFocusPseudoClass())}) d2l-icon,
-		d2l-icon:${unsafeCSS(getFocusPseudoClass())} {
-			box-shadow: 0 0 0 2px var(--d2l-color-celestine);
-			outline: none;
-		}
-
+		${getFocusRingStyles(pseudoClass => `:host([focus-ring]) d2l-icon, d2l-icon:${pseudoClass}`)}
 		:host {
 			/* for long numbers, center the number on the icon */
 			--d2l-count-badge-icon-padding: calc(-50% + (var(--d2l-count-badge-icon-height) / 2) + 2px);
@@ -66,6 +60,7 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
 		}
 
 		d2l-icon {
+			--d2l-focus-ring-offset: 0;
 			border: 2px solid transparent;
 			border-radius: 6px;
 		}

package/components/count-badge/count-badge.js

@@ -1,8 +1,8 @@
 import '../colors/colors.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { CountBadgeMixin } from './count-badge-mixin.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -10,24 +10,18 @@ class CountBadge extends FocusMixin(CountBadgeMixin(LitElement)) {
 
 	static get styles() {
 		return [super.styles, css`
-		:host([focus-ring]) .d2l-count-badge-wrapper,
-		:host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-count-badge-wrapper,
-		.d2l-count-badge-wrapper:${unsafeCSS(getFocusPseudoClass())} {
-			box-shadow: 0 0 0 2px var(--d2l-color-celestine);
-		}
-
+		${getFocusRingStyles(pseudoClass => `:host([focus-ring]) .d2l-count-badge-wrapper, .d2l-count-badge-wrapper:${pseudoClass}`)}
 		.d2l-count-badge-wrapper {
+			--d2l-focus-ring-offset: 0;
 			border: 2px solid transparent;
 		}
 
 		:host([size="small"]) .d2l-count-badge-wrapper {
 			border-radius: 0.65rem;
-			outline: none;
 		}
 
 		:host([size="large"]) .d2l-count-badge-wrapper {
 			border-radius: 0.8rem;
-			outline: none;
 		}
 		`];
 	}

package/components/demo/demo-snippet.js

@@ -78,7 +78,7 @@ class DemoSnippet extends LitElement {
 			d2l-dropdown.settings-dropdown {
 				background-color: white;
 				border-radius: 6px;
-				box-shadow: 0 0 0 1px var(--d2l-color-celestine-minus-1);
+				outline: 1px solid var(--d2l-color-celestine-minus-1);
 				position: fixed;
 				right: 1rem;
 				top: -0.25rem;

package/components/scroll-wrapper/scroll-wrapper.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { css, html, LitElement } from 'lit';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
@@ -13,11 +13,10 @@ let focusStyleSheet;
 function getFocusStyleSheet() {
 	if (!focusStyleSheet) {
 		focusStyleSheet = new CSSStyleSheet();
-		focusStyleSheet.replaceSync(css`
-		.d2l-scroll-wrapper-focus:${unsafeCSS(getFocusPseudoClass())} {
-			box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine), 0 2px 12px 0 rgba(0, 0, 0, 0.15);
-			outline: none;
-		}`);
+		focusStyleSheet.replaceSync(getFocusRingStyles(
+			'.d2l-scroll-wrapper-focus',
+			{ extraStyles: css`box-shadow: 0 0 0 2px #ffffff, 0 2px 12px 0 rgba(0, 0, 0, 0.15);` }
+		));
 	}
 	return focusStyleSheet;
 }

package/components/switch/switch-mixin.js

@@ -150,8 +150,9 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 				display: none;
 			}
 			.d2l-switch-inner:hover, .switch-hover {
-				border-color: var(--d2l-color-celestine);
-				box-shadow: 0 0 0 1px var(--d2l-color-celestine) inset;
+				border-color: transparent;
+				outline: 2px solid var(--d2l-color-celestine);
+				outline-offset: -2px;
 			}
 			@media (prefers-reduced-motion: reduce) {
 				.d2l-switch-toggle,

package/components/table/table-col-sort-button.js

@@ -3,10 +3,10 @@ import '../dropdown/dropdown.js';
 import '../dropdown/dropdown-menu.js';
 import '../icons/icon.js';
 import '../menu/menu.js';
-import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -116,11 +116,7 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 			button:hover {
 				background-color: var(--d2l-color-gypsum);
 			}
-			button:focus-visible,
-			button:${unsafeCSS(getFocusPseudoClass())} {
-				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
-				outline-style: none;
-			}
+			${getFocusRingStyles('button', { extraStyles: css`box-shadow: 0 0 0 2px #ffffff;` })}
 			d2l-icon {
 				margin-inline-start: 0.6rem;
 			}

package/components/tabs/demo/tab-custom.js

@@ -18,7 +18,7 @@ class TabCustom extends TabMixin(LitElement) {
 			}
 			${getFocusRingStyles(
 				pseudoClass => `:host(:${pseudoClass}) .d2l-tab-custom-content`,
-				{ extraStyles: 'border-radius: 0.3rem; color: var(--d2l-color-celestine);' }
+				{ extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` }
 			)}
 		`];
 

package/components/tabs/tab-internal.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const keyCodes = {
@@ -32,6 +32,7 @@ class Tab extends SkeletonMixin(LitElement) {
 				vertical-align: middle;
 			}
 			.d2l-tab-text {
+				--d2l-focus-ring-offset: 0;
 				margin: 0.5rem;
 				overflow: hidden;
 				padding: 0.1rem;
@@ -67,11 +68,7 @@ class Tab extends SkeletonMixin(LitElement) {
 				margin-inline-start: 0;
 				width: calc(100% - 0.6rem);
 			}
-			:host(:${unsafeCSS(getFocusPseudoClass())}) > .d2l-tab-text {
-				border-radius: 0.3rem;
-				box-shadow: 0 0 0 2px var(--d2l-color-celestine);
-				color: var(--d2l-color-celestine);
-			}
+			${getFocusRingStyles(pseudoClass => `:host(:${pseudoClass}) > .d2l-tab-text`, { extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` })}
 			:host([aria-selected="true"]:focus) {
 				text-decoration: none;
 			}

package/components/tabs/tabs.js

@@ -4,10 +4,10 @@ import '../../helpers/queueMicrotask.js';
 import './tab-internal.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { cssEscape, findComposedAncestor, getOffsetParent } from '../../helpers/dom.js';
+import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
 import { bodyCompactStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -159,9 +159,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 			.d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
 				background-color: var(--d2l-color-gypsum);
 			}
-			.d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
-				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
-			}
+			${getFocusRingStyles('.d2l-tabs-scroll-button')}
 			:host([skeleton]) .d2l-tabs-scroll-button {
 				visibility: hidden;
 			}

package/helpers/demo/prism.html

@@ -1860,16 +1860,19 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 				position: relative;
 			}
 			.d2l-card-link-container {
-				border-radius: 6px;
 				flex-basis: auto;
 				flex-grow: 1;
 				flex-shrink: 1;
-				overflow: hidden;
 				width: 100%; /* required for Legacy-Edge and FF when align-items: flex-start is specified */
 			}
 			.d2l-card-link-text {
 				display: inline-block;
 			}
+			.d2l-card-header {
+				border-start-end-radius: 6px;
+				border-start-start-radius: 6px;
+				overflow: hidden;
+			}
 
 			a {
 				bottom: -1px;
@@ -1906,22 +1909,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;
@@ -1950,23 +1945,17 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 
 			:host([subtle]) {
 				border: none;
+			}
+			:host([subtle][href]) {
 				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03);
 			}
-			:host(:hover) {
+			:host([href]:not([_active]):hover) {
 				box-shadow: 0 2px 14px 1px rgba(0, 0, 0, 0.06);
 			}
-			:host([subtle]:hover) {
+			:host([subtle][href]:not([_active]):hover) {
 				box-shadow: 0 4px 18px 2px rgba(0, 0, 0, 0.06);
 			}
-			:host([_active]) {
-				border-color: transparent;
-				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
-			}
-			:host([_active]:hover),
-			:host([subtle][_active]:hover) {
-				border-color: transparent;
-				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
-			}
+			${getFocusRingStyles(() => ':host([_active])', {'extraStyles': css`border-color: transparent;`})}
 			/* .d2l-card-link-container-hover is used to only color/underline when
 			hovering the anchor; these styles are not applied when hovering actions */
 			:host([href]) .d2l-card-link-container-hover,
@@ -1982,21 +1971,14 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 			:host([_dropdown-action-open]) {
 				z-index: 2;
 			}
-			:host(:not([href])),
-			:host([subtle]:not([href])) {
-				box-shadow: none;
-				transform: none;
-			}
 			@media (prefers-reduced-motion: no-preference) {
 				:host {
-					transition: transform 300ms ease-out 50ms, box-shadow 0.2s;
+					transition: box-shadow 0.2s;
 				}
-
-				:host(:hover),
-				:host([subtle]:hover),
-				:host([_active]:hover),
-				:host([subtle][_active]:hover) {
-					transform: translateY(-4px);
+			}
+			@media (prefers-contrast: more) {
+				:host([subtle]) {
+					border: 1px solid var(--d2l-color-gypsum);;
 				}
 			}
 		`];

package/helpers/focus.js

@@ -73,7 +73,7 @@ export function getFocusRingStyles(selector, { applyOnHover = false, extraStyles
 	}
 	@media (prefers-contrast: more) {
 		${cssSelector} {
-			outline-color: var(--d2l-focus-ring-color, Highlight);
+			outline-color: Highlight;
 		}
 	}`;
 }

package/lang/ar.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "إغلاق التنبيه",
 	"components.breadcrumbs.breadcrumb": "شريط التنقل",
 	"components.button-add.addItem": "إضافة عنصر",

package/lang/cy.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "Cau Hysbysiad",
 	"components.breadcrumbs.breadcrumb": "Briwsionyn Bara",
 	"components.button-add.addItem": "Ychwanegu Eitem",

package/lang/da.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "Luk besked",
 	"components.breadcrumbs.breadcrumb": "Brødkrumme",
 	"components.button-add.addItem": "Tilføj element",

package/lang/de.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "Benachrichtigung schließen",
 	"components.breadcrumbs.breadcrumb": "Brotkrümelnavigation",
 	"components.button-add.addItem": "Element hinzufügen",

package/lang/en-gb.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "Close Alert",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Add Item",

package/lang/en.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "Close Alert",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Add Item",

package/lang/es-es.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "Cerrar alerta",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",

package/lang/es.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "Cerrar alerta",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",

package/lang/fr-fr.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "Fermer l’alerte",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",

package/lang/fr.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "Fermer l’alerte",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",

package/lang/haw.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "Pani i ka makaʻala",
 	"components.breadcrumbs.breadcrumb": "Palapalapala",
 	"components.button-add.addItem": "Pākuʻi Mea",

package/lang/hi.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "अलर्ट बंद करें",
 	"components.breadcrumbs.breadcrumb": "ब्रेडक्रंब",
 	"components.button-add.addItem": "आइटम जोड़ें",

package/lang/ja.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "アラートを閉じる",
 	"components.breadcrumbs.breadcrumb": "階層",
 	"components.button-add.addItem": "項目の追加",

package/lang/ko.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "경보 닫기",
 	"components.breadcrumbs.breadcrumb": "이동 경로",
 	"components.button-add.addItem": "항목 추가",

package/lang/mi.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "Kati Matohi",
 	"components.breadcrumbs.breadcrumb": "Pānui",
 	"components.button-add.addItem": "Tāpiri Tūemi",

package/lang/nl.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "Waarschuwing sluiten",
 	"components.breadcrumbs.breadcrumb": "Kruimelpad",
 	"components.button-add.addItem": "Item toevoegen",

package/lang/pt.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "Fechar alerta",
 	"components.breadcrumbs.breadcrumb": "Auxiliar de navegação",
 	"components.button-add.addItem": "Adicionar item",

package/lang/sv.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "Stängningsvarning",
 	"components.breadcrumbs.breadcrumb": "Sökväg",
 	"components.button-add.addItem": "Lägg till objekt",

package/lang/tr.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "Kapatma Uyarısı",
 	"components.breadcrumbs.breadcrumb": "İçerik Haritası",
 	"components.button-add.addItem": "Öğe Ekle",

package/lang/zh-cn.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "关闭提醒",
 	"components.breadcrumbs.breadcrumb": "痕迹导航",
 	"components.button-add.addItem": "添加项目",

package/lang/zh-tw.js

@@ -1,5 +1,4 @@
 export default {
-	"__test__": "This will be removed in a follow-up PR (before translation)",
 	"components.alert.close": "關閉警示",
 	"components.breadcrumbs.breadcrumb": "導覽路徑",
 	"components.button-add.addItem": "新增項目",

package/package.json

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

package/templates/primary-secondary/primary-secondary.js

@@ -3,9 +3,9 @@ import '../../components/icons/icon-custom.js';
 import '../../components/icons/icon.js';
 import '../../components/offscreen/offscreen.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
+import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { formatPercent } from '@brightspace-ui/intl';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
@@ -939,11 +939,7 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 					color: white;
 					display: block;
 				}
-				.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-mobile {
-					box-shadow: 0 0 0 0.1rem white, 0 0 0 0.2rem var(--d2l-color-celestine);
-					right: 0.2rem;
-				}
-
+				${getFocusRingStyles(pseudoClass => `.d2l-template-primary-secondary-divider:${pseudoClass} .d2l-template-primary-secondary-divider-handle-mobile`, { extraStyles: css`right: 0.2rem; box-shadow: 0 0 0 2px #ffffff;` })}
 				.d2l-template-primary-secondary-divider-shadow {
 					box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
 					display: block;