@brightspace-ui/core 3.151.5 → 3.152.1

package/components/inputs/input-checkbox.js

@@ -25,9 +25,28 @@ export const cssSizes = {
 
 export const checkboxStyles = css`
 	input[type="checkbox"].d2l-input-checkbox {
+		--d2l-input-checkbox-background-image: none;
+		--d2l-input-checkbox-background-color: var(--d2l-color-regolith);
+		--d2l-input-checkbox-background-image-disabled:
+			linear-gradient(
+				/* regolith at 50% */
+				rgba(249, 251, 255, 0.5),
+				rgba(249, 251, 255, 0.5)
+			),
+			var(--d2l-input-checkbox-background-image);
+
+		@supports (color: color-mix(in srgb, black 50%, transparent)) {
+			--d2l-input-checkbox-background-image-disabled:
+				linear-gradient(
+					color-mix(in srgb, var(--d2l-input-checkbox-background-color) 50%, transparent),
+					color-mix(in srgb, var(--d2l-input-checkbox-background-color) 50%, transparent)
+				),
+				var(--d2l-input-checkbox-background-image);
+		}
 		-webkit-appearance: none;
 		-moz-appearance: none;
 		appearance: none;
+		background-image: var(--d2l-input-checkbox-background-image);
 		background-position: center center;
 		background-repeat: no-repeat;
 		background-size: ${cssSizes.inputBoxSize}rem ${cssSizes.inputBoxSize}rem;
@@ -43,17 +62,20 @@ export const checkboxStyles = css`
 		width: ${cssSizes.inputBoxSize}rem;
 	}
 	input[type="checkbox"].d2l-input-checkbox:checked {
-		background-image: ${inputCheck};
+		--d2l-input-checkbox-background-image: ${inputCheck};
 	}
 	input[type="checkbox"].d2l-input-checkbox:indeterminate {
-		background-image: ${inputCheckIndeterminate};
+		--d2l-input-checkbox-background-image: ${inputCheckIndeterminate};
 	}
 	input[type="checkbox"].d2l-input-checkbox,
 	input[type="checkbox"].d2l-input-checkbox:hover:disabled {
-		background-color: var(--d2l-color-regolith);
+		background-color: var(--d2l-input-checkbox-background-color);
 		border-color: var(--d2l-color-galena);
 		border-width: 1px;
 	}
+	input[type="checkbox"].d2l-input-checkbox:hover:disabled {
+		border-color: var(--d2l-color-corundum);
+	}
 	input[type="checkbox"].d2l-input-checkbox:hover,
 	input[type="checkbox"].d2l-input-checkbox:focus,
 	input[type="checkbox"].d2l-input-checkbox.d2l-input-checkbox-focus,
@@ -63,10 +85,11 @@ export const checkboxStyles = css`
 		outline-width: 0;
 	}
 	input[type="checkbox"].d2l-input-checkbox:disabled,
-	input[type="checkbox"].d2l-input-checkbox[aria-disabled="true"] {
-		opacity: 0.5;
+	input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
+		background-image: var(--d2l-input-checkbox-background-image-disabled);
+		border-color: var(--d2l-color-corundum);
 	}
-	@media (prefers-contrast: more) {
+	@media (forced-colors: active) {
 		input[type="checkbox"].d2l-input-checkbox:checked,
 		input[type="checkbox"].d2l-input-checkbox:indeterminate {
 			background-image: none;
@@ -85,6 +108,11 @@ export const checkboxStyles = css`
 			width: ${cssSizes.inputBoxSize}rem;
 		}
 
+		input[type="checkbox"].d2l-input-checkbox:disabled,
+		input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
+			opacity: 0.5;
+		}
+
 		input[type="checkbox"].d2l-input-checkbox:checked::after {
 			mask-image: ${inputCheck};
 		}
@@ -201,12 +229,9 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
 				.d2l-input-checkbox-supporting {
 					margin-inline-start: ${cssSizes.inputBoxSize + cssSizes.checkboxMargin}rem;
 				}
-				.d2l-input-checkbox-text-disabled {
+				:host(:not([skeleton])) .d2l-input-checkbox-text-disabled {
 					opacity: 0.5;
 				}
-				:host([skeleton]) .d2l-input-checkbox-text-disabled {
-					opacity: 1;
-				}
 				input[type="checkbox"].d2l-input-checkbox {
 					vertical-align: top;
 				}

package/components/list/list-item-checkbox-mixin.js

@@ -14,6 +14,11 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 			 * @type {boolean}
 			 */
 			selectionDisabled: { type: Boolean, attribute: 'selection-disabled', reflect: true },
+			/**
+			 * **Selection:** Tooltip text when selection is disabled
+			 * @type {string}
+			 */
+			selectionDisabledTooltip: { type: String, attribute: 'selection-disabled-tooltip' },
 			/**
 			 * **Selection:** Value to identify item if selectable
 			 * @type {string}
@@ -45,8 +50,12 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 				display: block;
 				height: 100%;
 			}
-			:host([selection-disabled]) .d2l-checkbox-action {
-				cursor: default;
+			:host([selection-disabled]) [slot="control-action"] {
+				pointer-events: none;
+			}
+			:host([selection-disabled]) [slot="control"],
+			:host([selection-disabled]) [slot="control-action"] [slot="content"] {
+				pointer-events: all;
 			}
 		` ];
 
@@ -155,10 +164,12 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 	}
 
 	_renderCheckbox() {
+		/* eslint-disable lit/no-private-properties */
 		return this.selectable ? html`
 			<d2l-selection-input
 				@d2l-selection-change="${this._onCheckboxChange}"
 				?disabled="${this.selectionDisabled}"
+				._disabledTooltip=${this.selectionDisabledTooltip}
 				.hovering="${this._hoveringSelection}"
 				id="${this._checkboxId}"
 				?_indeterminate="${this.selectionInfo.state === SelectionInfo.states.some}"
@@ -168,6 +179,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 				?skeleton="${this.skeleton}">
 			</d2l-selection-input>
 		` : nothing;
+		/* eslint-enable */
 	}
 
 	_renderCheckboxAction(inner) {

package/components/list/list-item-generic-layout.js

@@ -176,7 +176,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			:host(:not([no-primary-action])) ::slotted([slot="outside-control-action"]) {
 				grid-column-end: end;
 			}
-				
+
 			:host(:not([no-primary-action])) ::slotted([slot="control-action"]) {
 				grid-column-end: actions-start;
 			}

package/components/selection/selection-input.js

@@ -40,6 +40,8 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 			 * @type {string}
 			 */
 			key: { type: String },
+			/* passthrough for list-item */
+			_disabledTooltip: { state: true },
 			_indeterminate: { type: Boolean },
 			_provider: { type: Object }
 		};
@@ -120,6 +122,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 					?checked="${this.selected}"
 					class="${ifDefined(this.hovering ? 'd2l-hovering' : undefined)}"
 					?disabled="${this.disabled}"
+					disabled-tooltip="${ifDefined(this._disabledTooltip)}"
 					?indeterminate="${this._indeterminate}"
 					?skeleton="${this.skeleton}">
 				</d2l-input-checkbox>

package/custom-elements.json

@@ -8700,6 +8700,11 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "selection-disabled-tooltip",
+          "description": "**Selection:** Tooltip text when selection is disabled",
+          "type": "string"
+        },
         {
           "name": "selectable",
           "description": "**Selection:** Indicates an input should be rendered for selecting the item",
@@ -8809,6 +8814,12 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "selectionDisabledTooltip",
+          "attribute": "selection-disabled-tooltip",
+          "description": "**Selection:** Tooltip text when selection is disabled",
+          "type": "string"
+        },
         {
           "name": "selectable",
           "attribute": "selectable",
@@ -9050,6 +9061,11 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "selection-disabled-tooltip",
+          "description": "**Selection:** Tooltip text when selection is disabled",
+          "type": "string"
+        },
         {
           "name": "selectable",
           "description": "**Selection:** Indicates an input should be rendered for selecting the item",
@@ -9166,6 +9182,12 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "selectionDisabledTooltip",
+          "attribute": "selection-disabled-tooltip",
+          "description": "**Selection:** Tooltip text when selection is disabled",
+          "type": "string"
+        },
         {
           "name": "selectable",
           "attribute": "selectable",
@@ -9537,6 +9559,11 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "selection-disabled-tooltip",
+          "description": "**Selection:** Tooltip text when selection is disabled",
+          "type": "string"
+        },
         {
           "name": "selectable",
           "description": "**Selection:** Indicates an input should be rendered for selecting the item",
@@ -9665,6 +9692,12 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "selectionDisabledTooltip",
+          "attribute": "selection-disabled-tooltip",
+          "description": "**Selection:** Tooltip text when selection is disabled",
+          "type": "string"
+        },
         {
           "name": "selectable",
           "attribute": "selectable",
@@ -9840,6 +9873,11 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "selection-disabled-tooltip",
+          "description": "**Selection:** Tooltip text when selection is disabled",
+          "type": "string"
+        },
         {
           "name": "selectable",
           "description": "**Selection:** Indicates an input should be rendered for selecting the item",
@@ -9961,6 +9999,12 @@
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
+        {
+          "name": "selectionDisabledTooltip",
+          "attribute": "selection-disabled-tooltip",
+          "description": "**Selection:** Tooltip text when selection is disabled",
+          "type": "string"
+        },
         {
           "name": "selectable",
           "attribute": "selectable",

package/lang/ar.js

@@ -211,9 +211,9 @@ export default {
 	"components.tag-list.num-hidden": "زيادة {count} إضافي",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			one {Tag List with {count} item}
-			other {Tag List with {count} items}
+			=0 {قائمة العلامات بها 0 عناصر}
+			one {قائمة العلامات بها {count} عنصر}
+			other {قائمة العلامات بها {count} من العناصر}
 		}`,
 	"components.tag-list.show-less": "إظهار أقل",
 	"components.tag-list.show-more-description": "حدد لإظهار عناصر قائمة العلامات المخفية",

package/lang/cy.js

@@ -211,9 +211,9 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} yn rhagor",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			one {Tag List with {count} item}
-			other {Tag List with {count} items}
+			=0 {Rhestr Tagiau gyda 0 eitem}
+			one {Rhestr Tagiau gyda {count} eitem}
+			other {Rhestr Tagiau gyda {count} eitem}
 		}`,
 	"components.tag-list.show-less": "Dangos Llai",
 	"components.tag-list.show-more-description": "Dewis i ddangos eitemau rhestr tag cudd",

package/lang/da.js

@@ -211,9 +211,9 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} mere",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			one {Tag List with {count} item}
-			other {Tag List with {count} items}
+			=0 {Tagliste med 0 elementer}
+			one {Tagliste med {count} element}
+			other {Tagliste med {count} elementer}
 		}`,
 	"components.tag-list.show-less": "Vis færre",
 	"components.tag-list.show-more-description": "Vælg for at få vist skjulte taglisteelementer",

package/lang/de.js

@@ -211,9 +211,9 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} weitere",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			one {Tag List with {count} item}
-			other {Tag List with {count} items}
+			=0 {Tag-Liste mit 0 Elementen}
+			one {Tag-Liste mit {count} Element}
+			other {Tag-Liste mit {count} Elementen}
 		}`,
 	"components.tag-list.show-less": "Weniger anzeigen",
 	"components.tag-list.show-more-description": "Wählen Sie diese Option, um ausgeblendete Elemente der Tag-Liste anzuzeigen",

package/lang/es-es.js

@@ -211,9 +211,9 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} más",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			one {Tag List with {count} item}
-			other {Tag List with {count} items}
+			=0 {Lista de etiquetas con 0 elementos}
+			one {Lista de etiquetas con {count} elemento}
+			other {Lista de etiquetas con {count} elementos}
 		}`,
 	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Seleccione esta opción para mostrar los elementos ocultos de la lista de etiquetas",

package/lang/es.js

@@ -211,9 +211,9 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} más",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			one {Tag List with {count} item}
-			other {Tag List with {count} items}
+			=0 {Lista de etiquetas con 0 elementos}
+			one {Lista de etiquetas con {count} elemento}
+			other {Lista de etiquetas con {count} elementos}
 		}`,
 	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Seleccione para mostrar los elementos ocultos de la lista de etiquetas",

package/lang/fr-fr.js

@@ -211,9 +211,9 @@ export default {
 	"components.tag-list.num-hidden": "{count} de plus",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			one {Tag List with {count} item}
-			other {Tag List with {count} items}
+			=0 {Liste d’étiquettes comportant 0 élément}
+			one {Liste d’étiquettes comportant {count} élément}
+			other {Liste d’étiquettes comportant {count} éléments}
 		}`,
 	"components.tag-list.show-less": "Afficher moins",
 	"components.tag-list.show-more-description": "Sélectionnez cette option pour afficher les éléments de la liste d’étiquettes masquées",

package/lang/fr.js

@@ -211,9 +211,9 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} de plus",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			one {Tag List with {count} item}
-			other {Tag List with {count} items}
+			=0 {Liste de balises avec 0 élément}
+			one {Liste de balises avec {count} élément}
+			other {Liste de balises avec {count} éléments}
 		}`,
 	"components.tag-list.show-less": "Afficher moins",
 	"components.tag-list.show-more-description": "Sélectionnez cette option pour afficher les éléments de la liste des balises cachées",

package/lang/haw.js

@@ -212,8 +212,8 @@ export default {
 	"components.tag-list.role-description":
 		`{count, plural,
 			=0 {Tag List with 0 items}
-			one {Tag List with {count} item}
-			other {Tag List with {count} items}
+			one {Tag List with {count}i mea}
+			other {Tag List with {count}a ʻē aʻe}
 		}`,
 	"components.tag-list.show-less": "Hōʻike liʻiliʻi",
 	"components.tag-list.show-more-description": "E koho e hōʻike i nā mea papa inoa inoa huna",

package/lang/hi.js

@@ -211,9 +211,9 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} और",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			one {Tag List with {count} item}
-			other {Tag List with {count} items}
+			=0 {0 आइटम के साथ सूची टैग करें}
+			one {{count} आइटम के साथ सूची टैग करें}
+			other {{count} आइटम के साथ सूची टैग करें}
 		}`,
 	"components.tag-list.show-less": "कम दिखाएँ",
 	"components.tag-list.show-more-description": "छिपे हुए टैग लिस्ट आइटम दिखाने के लिए चुनें",

package/lang/ja.js

@@ -203,8 +203,8 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} 件追加",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			other {Tag List with {count} items}
+			=0 {0 項目のタグリスト}
+			other {{count} 項目のタグリスト}
 		}`,
 	"components.tag-list.show-less": "少なく表示",
 	"components.tag-list.show-more-description": "選択すると、非表示のタグリスト項目が表示されます",

package/lang/ko.js

@@ -203,8 +203,8 @@ export default {
 	"components.tag-list.num-hidden": "{count}개 더",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			other {Tag List with {count} items}
+			=0 {0개의 항목이 있는 태그 목록}
+			other {{count}개의 항목이 있는 태그 목록}
 		}`,
 	"components.tag-list.show-less": "간단히 표시",
 	"components.tag-list.show-more-description": "숨겨진 태그 목록 항목을 표시하려면 선택합니다",

package/lang/mi.js

@@ -212,8 +212,8 @@ export default {
 	"components.tag-list.role-description":
 		`{count, plural,
 			=0 {Tag List with 0 items}
-			one {Tag List with {count} item}
-			other {Tag List with {count} items}
+			one {Tag List with {count}ahi te mea}
+			other {Tag List with {count}ētahi atu tūemi}
 		}`,
 	"components.tag-list.show-less": "Whakaaturia mai kia iti iho",
 	"components.tag-list.show-more-description": "Tīpakohia hei whakaatu i ngā tūemi rārangi tūtohu hunahuna",

package/lang/nl.js

@@ -211,9 +211,9 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} extra",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			one {Tag List with {count} item}
-			other {Tag List with {count} items}
+			=0 {Taglijst met 0 items}
+			one {Taglijst met {count} item}
+			other {Taglijst met {count} items}
 		}`,
 	"components.tag-list.show-less": "Minder weergeven",
 	"components.tag-list.show-more-description": "Selecteer deze optie om verborgen items op labellijsten weer te geven",

package/lang/pt.js

@@ -173,7 +173,7 @@ export default {
 	"components.selection.selected-plus": "Mais de {count} selecionados",
 	"components.selection-controls.label": "Ações para seleção",
 	"components.sort.label": "Classificar",
-	"components.sort.text": "Classificação: {selectedItemText}",
+	"components.sort.text": "Classificar: {selectedItemText}",
 	"components.switch.conditions": "As condições devem ser atendidas",
 	"components.switch.hidden": "Oculto",
 	"components.switch.visible": "Visível",
@@ -211,9 +211,9 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} mais",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			one {Tag List with {count} item}
-			other {Tag List with {count} items}
+			=0 {Lista de etiquetas com 0 item}
+			one {Lista de etiquetas com {count} item}
+			other {Lista de etiquetas com {count} itens}
 		}`,
 	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Selecione para mostrar itens ocultos da lista de etiquetas",

package/lang/sv.js

@@ -211,9 +211,9 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} till",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			one {Tag List with {count} item}
-			other {Tag List with {count} items}
+			=0 {Tagglista med 0 objekt}
+			one {Tagglista med {count} objekt}
+			other {Tagglista med {count} objekt}
 		}`,
 	"components.tag-list.show-less": "Visa färre",
 	"components.tag-list.show-more-description": "Välj för att visa dolda tagglistobjekt",

package/lang/tr.js

@@ -211,9 +211,9 @@ export default {
 	"components.tag-list.num-hidden": "+{count} tane daha",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			one {Tag List with {count} item}
-			other {Tag List with {count} items}
+			=0 {0 öğeli Etiket Listesi}
+			one {{count} öğeli Etiket Listesi}
+			other {{count} öğeli Etiket Listesi}
 		}`,
 	"components.tag-list.show-less": "Daha Azını Göster",
 	"components.tag-list.show-more-description": "Gizli etiket listesi öğelerini göstermek için seçin",

package/lang/zh-cn.js

@@ -203,8 +203,8 @@ export default {
 	"components.tag-list.num-hidden": "+ {count} 个",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			other {Tag List with {count} items}
+			=0 {包含 0 个项目的标签列表}
+			other {包含 {count} 个项目的标签列表}
 		}`,
 	"components.tag-list.show-less": "显示更少",
 	"components.tag-list.show-more-description": "选择以显示隐藏的标签列表项目",

package/lang/zh-tw.js

@@ -204,8 +204,8 @@ export default {
 	"components.tag-list.num-hidden": "還有 {count} 個",
 	"components.tag-list.role-description":
 		`{count, plural,
-			=0 {Tag List with 0 items}
-			other {Tag List with {count} items}
+			=0 {標記列表包含 0 個項目}
+			other {標記列表包含 {count} 個項目}
 		}`,
 	"components.tag-list.show-less": "顯示更少",
 	"components.tag-list.show-more-description": "選取以顯示隱藏的標記清單項目",

package/package.json

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