@brightspace-ui/core 2.37.0 → 2.37.3

package/components/menu/menu-item-mixin.js

@@ -1,6 +1,4 @@
-import { FocusVisiblePolyfillMixin } from  '../../mixins/focus-visible-polyfill-mixin.js';
-
-export const MenuItemMixin = superclass => class extends FocusVisiblePolyfillMixin(superclass) {
+export const MenuItemMixin = superclass => class extends superclass {
 
 	static get properties() {
 		return {

package/components/menu/menu-item-styles.js

@@ -16,8 +16,6 @@ export const menuItemStyles = css`
 		width: 100%;
 	}
 
-	:host(.focus-visible),
-	:host([first].focus-visible),
 	:host(:hover),
 	:host([first]:hover) {
 		background-color: var(--d2l-menu-background-color-hover);
@@ -27,7 +25,23 @@ export const menuItemStyles = css`
 		z-index: 2;
 	}
 
-	:host([disabled]), :host([disabled]:hover), :host([disabled].focus-visible) {
+	/** separated because Safari <15.4 is having trouble parsing these */
+	:host(:focus-visible),
+	:host([first]:focus-visible) {
+		background-color: var(--d2l-menu-background-color-hover);
+		border-bottom: 1px solid var(--d2l-menu-border-color-hover);
+		border-top: 1px solid var(--d2l-menu-border-color-hover);
+		color: var(--d2l-menu-foreground-color-hover);
+		z-index: 2;
+	}
+
+	:host([disabled]), :host([disabled]:hover) {
+		cursor: default;
+		opacity: 0.75;
+	}
+
+	/** separated because Safari <15.4 is having trouble parsing these */
+	:host([disabled]:focus-visible) {
 		cursor: default;
 		opacity: 0.75;
 	}
@@ -40,7 +54,12 @@ export const menuItemStyles = css`
 		border-top-color: transparent;
 	}
 
-	:host([last]:hover), :host([last].focus-visible) {
+	:host([last]:hover) {
+		border-bottom-color: var(--d2l-menu-border-color-hover);
+	}
+
+	/** separated because Safari <15.4 is having trouble parsing these */
+	:host([last]:focus-visible) {
 		border-bottom-color: var(--d2l-menu-border-color-hover);
 	}
 

package/components/menu/menu.js

@@ -2,7 +2,6 @@ import '../colors/colors.js';
 import '../icons/icon.js';
 import './menu-item-return.js';
 import { css, html, LitElement } from 'lit';
-import { FocusVisiblePolyfillMixin } from  '../../mixins/focus-visible-polyfill-mixin.js';
 import { HierarchicalViewMixin } from '../hierarchical-view/hierarchical-view-mixin.js';
 import { ThemeMixin } from '../../mixins/theme-mixin.js';
 
@@ -21,7 +20,7 @@ const keyCodes = {
  * @slot - Menu items
  * @fires d2l-menu-resize - Dispatched when size of menu changes (e.g., when nested menu of a different size is opened)
  */
-class Menu extends FocusVisiblePolyfillMixin(ThemeMixin(HierarchicalViewMixin(LitElement))) {
+class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
 
 	static get properties() {
 		return {

package/components/paging/pager-load-more.js

@@ -5,6 +5,7 @@ import { buttonStyles } from '../button/button-styles.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
+import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { getFirstFocusableDescendant } from '../../helpers/focus.js';
 import { getSeparator } from '@brightspace-ui/intl/lib/list.js';
 import { labelStyles } from '../typography/styles.js';
@@ -102,11 +103,11 @@ class LoadMore extends FocusMixin(FocusVisiblePolyfillMixin(LocalizeCoreElement(
 				<span class="d2l-offscreen" role="alert">${this.localize('components.pager-load-more.status-loading')}</span>
 				<d2l-loading-spinner size="24"></d2l-loading-spinner>
 			` : html`
-				<span class="action">${this.localize('components.pager-load-more.action', { count: this.pageSize })}</span>
+				<span class="action">${this.localize('components.pager-load-more.action', { count: formatNumber(this.pageSize) })}</span>
 				${this.itemCount > -1 ? html`
 					<span class="d2l-offscreen">${getSeparator({ nonBreaking: true })}</span>
 					<span class="separator"></span>
-					<span class="info">${this.localize('components.pager-load-more.info', { showingCount: this.itemShowingCount, totalCount: this.itemCount })}</span>
+					<span class="info">${this.localize('components.pager-load-more.info', { showingCount: formatNumber(this.itemShowingCount), totalCount: this.itemCount, totalCountFormatted: formatNumber(this.itemCount) })}</span>
 				` : nothing}
 			`}
 		</button>

package/components/tooltip/tooltip-help.js

@@ -49,6 +49,7 @@ class TooltipHelp extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
 				background: none;
 				border: none;
 				cursor: inherit;
+				font-family: inherit;
 				padding: 0;
 				text-decoration-line: underline;
 				text-decoration-style: dashed;

package/components/typography/styles.js

@@ -1,5 +1,12 @@
 import '../colors/colors.js';
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+
+export const _isValidCssSelector = (selector) => {
+	const re = /[#.]?([a-zA-Z0-9-_]+)(\[[a-zA-Z0-9-_]+\])?([a-zA-Z0-9-_]+)?/g;
+	const match = selector.match(re);
+
+	return !!match && match.length === 1 && match[0].length === selector.length;
+};
 
 export const bodyStandardStyles = css`
 	.d2l-body-standard {
@@ -41,26 +48,36 @@ export const bodyStandardStyles = css`
 	}
 `;
 
-export const bodyCompactStyles = css`
-	.d2l-body-compact {
-		font-size: 0.8rem;
-		font-weight: 400;
-		line-height: 1.2rem;
-	}
-	:host([skeleton]) .d2l-body-compact.d2l-skeletize::before {
-		bottom: 0.3rem;
-		top: 0.3rem;
-	}
-	:host([skeleton]) .d2l-body-compact.d2l-skeletize-paragraph-2 {
-		max-height: 2.4rem;
-	}
-	:host([skeleton]) .d2l-body-compact.d2l-skeletize-paragraph-3 {
-		max-height: 3.6rem;
-	}
-	:host([skeleton]) .d2l-body-compact.d2l-skeletize-paragraph-5 {
-		max-height: 6rem;
-	}
-`;
+/**
+ * A private helper method that should not be used by general consumers
+ */
+export const _generateBodyCompactStyles = (selector) => {
+	if (!_isValidCssSelector(selector)) return;
+
+	selector = unsafeCSS(selector);
+	return css`
+		${selector} {
+			font-size: 0.8rem;
+			font-weight: 400;
+			line-height: 1.2rem;
+		}
+		:host([skeleton]) ${selector}.d2l-skeletize::before {
+			bottom: 0.3rem;
+			top: 0.3rem;
+		}
+		:host([skeleton]) ${selector}.d2l-skeletize-paragraph-2 {
+			max-height: 2.4rem;
+		}
+		:host([skeleton]) ${selector}.d2l-skeletize-paragraph-3 {
+			max-height: 3.6rem;
+		}
+		:host([skeleton]) ${selector}.d2l-skeletize-paragraph-5 {
+			max-height: 6rem;
+		}
+	`;
+};
+
+export const bodyCompactStyles = _generateBodyCompactStyles('.d2l-body-compact');
 
 export const bodySmallStyles = css`
 	.d2l-body-small {
@@ -212,18 +229,28 @@ export const heading4Styles = css`
 	}
 `;
 
-export const labelStyles = css`
-	.d2l-label-text {
-		font-size: 0.7rem;
-		font-weight: 700;
-		letter-spacing: 0.2px;
-		line-height: 1rem;
-	}
-	:host([skeleton]) .d2l-label-text.d2l-skeletize::before {
-		bottom: 0.25rem;
-		top: 0.15rem;
-	}
-`;
+/**
+ * A private helper method that should not be used by general consumers
+ */
+export const _generateLabelStyles = (selector) => {
+	if (!_isValidCssSelector(selector)) return;
+
+	selector = unsafeCSS(selector);
+	return css`
+		${selector} {
+			font-size: 0.7rem;
+			font-weight: 700;
+			letter-spacing: 0.2px;
+			line-height: 1rem;
+		}
+		:host([skeleton]) ${selector}.d2l-skeletize::before {
+			bottom: 0.25rem;
+			top: 0.15rem;
+		}
+	`;
+};
+
+export const labelStyles = _generateLabelStyles('.d2l-label-text');
 
 export const blockquoteStyles = css`
 	.d2l-blockquote {

package/lang/ar.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "المزيد",
 	"components.overflow-group.moreActions": "مزيد من الإجراءات",
 	"components.pager-load-more.action": "تحميل {count} إضافي",
-	"components.pager-load-more.info": "{showingCount} من {totalCount} من المواد",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "تحميل المزيد من المواد",
 	"components.selection.action-hint": "حدد مادة لتنفيذ هذا الإجراء.",
 	"components.selection.select-all": "تحديد الكل",

package/lang/cy.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "mwy",
 	"components.overflow-group.moreActions": "Rhagor o Gamau Gweithredu",
 	"components.pager-load-more.action": "Lwytho {count} Arall",
-	"components.pager-load-more.info": "{showingCount} o {totalCount} eitem",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Llwytho rhagor o eitemau",
 	"components.selection.action-hint": "Dewiswch eitem i gyflawni'r weithred hon.",
 	"components.selection.select-all": "Dewis y Cyfan",

package/lang/da.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "flere",
 	"components.overflow-group.moreActions": "Flere handlinger",
 	"components.pager-load-more.action": "Indlæs {count} mere",
-	"components.pager-load-more.info": "{showingCount} af {totalCount} elementer",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Indlæser flere elementer",
 	"components.selection.action-hint": "Vælg et element for at udføre denne handling.",
 	"components.selection.select-all": "Vælg alle",

package/lang/de.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "mehr",
 	"components.overflow-group.moreActions": "Weitere Aktionen",
 	"components.pager-load-more.action": "{count} weitere laden",
-	"components.pager-load-more.info": "{showingCount} von {totalCount} Elementen",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Weitere Elemente werden geladen",
 	"components.selection.action-hint": "Wählen Sie ein Element aus, um diese Aktion auszuführen.",
 	"components.selection.select-all": "Alle auswählen",

package/lang/en.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "more",
 	"components.overflow-group.moreActions": "More Actions",
 	"components.pager-load-more.action": "Load {count} More",
-	"components.pager-load-more.info": "{showingCount} of {totalCount} items",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Loading more items",
 	"components.selection.action-hint": "Select an item to perform this action.",
 	"components.selection.select-all": "Select All",

package/lang/es-es.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "más",
 	"components.overflow-group.moreActions": "Más acciones",
 	"components.pager-load-more.action": "Cargar {count} más",
-	"components.pager-load-more.info": "{showingCount} de {totalCount} elementos",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Cargando más elementos",
 	"components.selection.action-hint": "Seleccione un elemento para realizar esta acción.",
 	"components.selection.select-all": "Seleccionar todo",

package/lang/es.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "más",
 	"components.overflow-group.moreActions": "Más acciones",
 	"components.pager-load-more.action": "Cargar {count} más",
-	"components.pager-load-more.info": "{showingCount} de {totalCount} elementos",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Cargando más elementos",
 	"components.selection.action-hint": "Seleccione un elemento para realizar esta acción.",
 	"components.selection.select-all": "Seleccionar todo",

package/lang/fr-fr.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "plus",
 	"components.overflow-group.moreActions": "Plus d'actions",
 	"components.pager-load-more.action": "Charger {count} supplémentaire(s)",
-	"components.pager-load-more.info": "{showingCount} élément(s) sur {totalCount}",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Charger plus d’éléments",
 	"components.selection.action-hint": "Sélectionnez un élément pour exécuter cette action.",
 	"components.selection.select-all": "Tout sélectionner",

package/lang/fr.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "plus",
 	"components.overflow-group.moreActions": "Plus d'actions",
 	"components.pager-load-more.action": "Charger {count} de plus",
-	"components.pager-load-more.info": "{showingCount} de {totalCount} éléments",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Chargement d'autres d'éléments",
 	"components.selection.action-hint": "Sélectionner un élément pour exécuter cette action.",
 	"components.selection.select-all": "Tout sélectionner",

package/lang/hi.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "अधिक",
 	"components.overflow-group.moreActions": "अधिक क्रियाएँ",
 	"components.pager-load-more.action": "{count} और लोड करें",
-	"components.pager-load-more.info": "{totalCount} में से {showingCount} आइटम",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "और आइटम लोड करना",
 	"components.selection.action-hint": "यह कार्रवाई निष्पादित करने के लिए कोई आइटम का चयन करें।",
 	"components.selection.select-all": "सभी का चयन करें",

package/lang/ja.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "増やす",
 	"components.overflow-group.moreActions": "その他のアクション",
 	"components.pager-load-more.action": "さらに {count} 件を読み込む",
-	"components.pager-load-more.info": "{showingCount}/{totalCount} 項目",
+	"components.pager-load-more.info": "{totalCount, plural, other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "さらに項目を読み込み中",
 	"components.selection.action-hint": "このアクションを実行するための項目を選択します。",
 	"components.selection.select-all": "すべて選択",

package/lang/ko.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "더 보기",
 	"components.overflow-group.moreActions": "추가 작업",
 	"components.pager-load-more.action": "{count}개 더 로드",
-	"components.pager-load-more.info": "{totalCount}개 항목 중 {showingCount}개",
+	"components.pager-load-more.info": "{totalCount, plural, other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "더 많은 항목 로드",
 	"components.selection.action-hint": "이 작업을 수행할 항목을 선택하십시오.",
 	"components.selection.select-all": "모두 선택",

package/lang/nl.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "meer",
 	"components.overflow-group.moreActions": "Meer acties",
 	"components.pager-load-more.action": "Laad nog {count} extra",
-	"components.pager-load-more.info": "{showingCount} van {totalCount} items",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Er worden meer items geladen",
 	"components.selection.action-hint": "Selecteer een item om deze actie uit te voeren.",
 	"components.selection.select-all": "Alles selecteren",

package/lang/pt.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "mais",
 	"components.overflow-group.moreActions": "Mais ações",
 	"components.pager-load-more.action": "Carregar mais {count}",
-	"components.pager-load-more.info": "{showingCount} de {totalCount} itens",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Carregando mais itens",
 	"components.selection.action-hint": "Selecione um item para realizar esta ação.",
 	"components.selection.select-all": "Selecionar tudo",

package/lang/sv.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "mer",
 	"components.overflow-group.moreActions": "Fler åtgärder",
 	"components.pager-load-more.action": "Läs in {count} till",
-	"components.pager-load-more.info": "{showingCount} av {totalCount} objekt",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Läser in fler objekt",
 	"components.selection.action-hint": "Välj ett objekt för att utföra åtgärden.",
 	"components.selection.select-all": "Välj alla",

package/lang/tr.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "daha fazla",
 	"components.overflow-group.moreActions": "Daha Fazla Eylem",
 	"components.pager-load-more.action": "{count} Tane Daha Yükle",
-	"components.pager-load-more.info": "{totalCount} / {showingCount} öğe",
+	"components.pager-load-more.info": "{totalCount, plural, one {{showingCount} of {totalCountFormatted} item} other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "Daha fazla öğe yükleniyor",
 	"components.selection.action-hint": "Bu eylemi gerçekleştirebilmek için bir öğe seçin.",
 	"components.selection.select-all": "Tümünü Seç",

package/lang/zh-cn.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "更多",
 	"components.overflow-group.moreActions": "更多操作",
 	"components.pager-load-more.action": "再加载 {count} 个",
-	"components.pager-load-more.info": "{showingCount} 个，共 {totalCount} 个项目",
+	"components.pager-load-more.info": "{totalCount, plural, other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "加载更多项目",
 	"components.selection.action-hint": "选择一个项目后才能执行此操作。",
 	"components.selection.select-all": "全选",

package/lang/zh-tw.js

@@ -92,7 +92,7 @@ export default {
 	"components.more-less.more": "較多",
 	"components.overflow-group.moreActions": "其他動作",
 	"components.pager-load-more.action": "再載入 {count} 個",
-	"components.pager-load-more.info": "{showingCount} 個項目，共 {totalCount} 個項目",
+	"components.pager-load-more.info": "{totalCount, plural, other {{showingCount} of {totalCountFormatted} items}}",
 	"components.pager-load-more.status-loading": "正在載入更多項目",
 	"components.selection.action-hint": "選取項目以執行此動作。",
 	"components.selection.select-all": "全選",

package/package.json

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