@brightspace-ui/core 2.54.6 → 2.55.1

package/components/description-list/README.md

@@ -118,6 +118,7 @@ The `d2l-dl-wrapper` component can be combined with `descriptionListStyles` to a
 | Property | Type | Description | Default Value
 |---|---|---|---|
 | `breakpoint` | Number | Width for component to use a stacked layout. | 240 |
+| `force-stacked` | Boolean | Force the component to always use a stacked layout; will override breakpoint attribute | false |
 
 <!-- docs: end hidden content -->
 

package/components/description-list/demo/description-list-test.js

@@ -11,6 +11,11 @@ class TestDescriptionList extends LitElement {
 			 * @type {number}
 			 */
 			breakpoint: { type: Number, reflect: true },
+			/**
+			 * Force the component to always use a stacked layout; will override breakpoint attribute
+			 * @type {boolean}
+			 */
+			forceStacked: { type: Boolean, reflect: true, attribute: 'force-stacked' },
 			/**
 			 * @ignore
 			 */
@@ -47,7 +52,10 @@ class TestDescriptionList extends LitElement {
 
 	render() {
 		return html`
-			<d2l-dl-wrapper breakpoint="${ifDefined(this.breakpoint)}">
+			<d2l-dl-wrapper
+				breakpoint="${ifDefined(this.breakpoint)}"
+				?force-stacked="${this.forceStacked}"
+			>
 				${this._renderExample()}
 			</d2l-dl-wrapper>
 		`;

package/components/description-list/demo/description-list.html

@@ -23,6 +23,11 @@
 				<d2l-test-dl type="long" breakpoint="300"></d2l-test-dl>
 			</d2l-demo-snippet>
 
+			<h2>Stacked</h2>
+			<d2l-demo-snippet fullscreen>
+				<d2l-test-dl type="long" force-stacked></d2l-test-dl>
+			</d2l-demo-snippet>
+
 			<h2>Activity Display</h2>
 			<d2l-demo-snippet fullscreen>
 				<d2l-test-dl type="activity-display"></d2l-test-dl>

package/components/description-list/description-list-wrapper.js

@@ -41,6 +41,11 @@ class DescriptionListWrapper extends LitElement {
 			 * @type {number}
 			 */
 			breakpoint: { type: Number, reflect: true },
+			/**
+			 * Force the component to always use a stacked layout; will override breakpoint attribute
+			 * @type {boolean}
+			 */
+			forceStacked: { type: Boolean, reflect: true, attribute: 'force-stacked' },
 			_stacked: { state: true },
 		};
 	}
@@ -55,7 +60,7 @@ class DescriptionListWrapper extends LitElement {
 			}
 			.stacked {
 				--d2l-dl-wrapper-dl-display: block;
-				--d2l-dl-wrapper-dt-max-width: unset;
+				--d2l-dl-wrapper-dt-max-width: none;
 				--d2l-dl-wrapper-dt-margin: 0 0 0.3rem 0;
 				--d2l-dl-wrapper-dd-margin: 0 0 0.9rem 0;
 			}
@@ -65,18 +70,16 @@ class DescriptionListWrapper extends LitElement {
 	constructor() {
 		super();
 		this.breakpoint = 240;
-		this._resizeObserver = new ResizeObserver(this._onResize.bind(this));
+		this.forceStacked = false;
 		this._stacked = false;
 	}
 
-	connectedCallback() {
-		super.connectedCallback();
-		this._resizeObserver.observe(this);
-	}
-
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this._resizeObserver.disconnect();
+
+		if (this._resizeObserver) {
+			this._resizeObserver.disconnect();
+		}
 	}
 
 	render() {
@@ -86,6 +89,21 @@ class DescriptionListWrapper extends LitElement {
 		return html`<slot class="${classMap(classes)}"></slot>`;
 	}
 
+	updated(changedProperties) {
+		if (changedProperties.has('forceStacked')) {
+			if (!this.forceStacked) {
+				this._resizeObserver = new ResizeObserver(this._onResize.bind(this));
+				this._resizeObserver.observe(this);
+			} else {
+				if (this._resizeObserver) {
+					this._resizeObserver.disconnect();
+					this._resizeObserver = undefined;
+				}
+				this._stacked = true;
+			}
+		}
+	}
+
 	_onResize(entries) {
 		if (!entries || entries.length === 0) return;
 		const entry = entries[0];

package/custom-elements.json

@@ -1473,6 +1473,11 @@
           "name": "breakpoint",
           "description": "Width for component to use a stacked layout",
           "type": "number"
+        },
+        {
+          "name": "force-stacked",
+          "description": "Force the component to always use a stacked layout; will override breakpoint attribute",
+          "type": "boolean"
         }
       ],
       "properties": [
@@ -1482,6 +1487,12 @@
           "description": "Width for component to use a stacked layout",
           "type": "number"
         },
+        {
+          "name": "forceStacked",
+          "attribute": "force-stacked",
+          "description": "Force the component to always use a stacked layout; will override breakpoint attribute",
+          "type": "boolean"
+        },
         {
           "name": "type",
           "type": "string",
@@ -1499,6 +1510,12 @@
           "description": "Width for component to use a stacked layout",
           "type": "number",
           "default": "240"
+        },
+        {
+          "name": "force-stacked",
+          "description": "Force the component to always use a stacked layout; will override breakpoint attribute",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -1508,6 +1525,13 @@
           "description": "Width for component to use a stacked layout",
           "type": "number",
           "default": "240"
+        },
+        {
+          "name": "forceStacked",
+          "attribute": "force-stacked",
+          "description": "Force the component to always use a stacked layout; will override breakpoint attribute",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "slots": [

package/lang/ar.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "تمت إزالة عنصر قائمة العلامات {value}",
 	"components.tag-list.interactive-label": "قائمة العلامات، {count} من العناصر",
 	"components.tag-list.num-hidden": "زيادة {count} إضافي",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "قائمة العلامات",
 	"components.tag-list.show-less": "إظهار أقل",
 	"components.tag-list.show-more-description": "حدد لإظهار عناصر قائمة العلامات المخفية",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "العلامة",
 	"components.tag-list-item.tooltip-arrow-keys": "مفاتيح الأسهم",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "التنقل بين العلامات",
 	"components.tag-list-item.tooltip-delete-key": "مسافة للخلف/حذف",

package/lang/cy.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Wedi tynnu’r eitem rhestr tag {value}",
 	"components.tag-list.interactive-label": "Rhestr Tag, {count} o eitemau",
 	"components.tag-list.num-hidden": "+ {count} yn rhagor",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "Rhestr o Dagiau",
 	"components.tag-list.show-less": "Dangos Llai",
 	"components.tag-list.show-more-description": "Dewis i ddangos eitemau rhestr tag cudd",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "Tag", // mfv-translated
 	"components.tag-list-item.tooltip-arrow-keys": "Byselli Saeth",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Symud rhwng tagiau",
 	"components.tag-list-item.tooltip-delete-key": "Yn ôl/Dileu",

package/lang/da.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Fjernede taglisteelement {value}",
 	"components.tag-list.interactive-label": "Tagliste, {count} elementer",
 	"components.tag-list.num-hidden": "+ {count} mere",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "Tagliste",
 	"components.tag-list.show-less": "Vis færre",
 	"components.tag-list.show-more-description": "Vælg for at få vist skjulte taglisteelementer",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "Tag", // mfv-translated
 	"components.tag-list-item.tooltip-arrow-keys": "Piletaster",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Flyt mellem tags",
 	"components.tag-list-item.tooltip-delete-key": "Tilbage/Slet",

package/lang/de.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Element {value} der Tag-Liste wurde entfernt",
 	"components.tag-list.interactive-label": "Tag-Liste, {count} Elemente",
 	"components.tag-list.num-hidden": "+ {count} weitere",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "Tag-Liste",
 	"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",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "Tag", // mfv-translated
 	"components.tag-list-item.tooltip-arrow-keys": "Pfeiltasten",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Zwischen Tags wechseln",
 	"components.tag-list-item.tooltip-delete-key": "Rücktaste/Entfernen",

package/lang/es-es.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Se ha eliminado el elemento {value} de la lista de etiquetas",
 	"components.tag-list.interactive-label": "Lista de etiquetas, {count} elementos",
 	"components.tag-list.num-hidden": "+ {count} más",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "Lista de etiquetas",
 	"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",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "Etiqueta",
 	"components.tag-list-item.tooltip-arrow-keys": "Teclas de flecha",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Desplazamiento entre etiquetas",
 	"components.tag-list-item.tooltip-delete-key": "Retroceso/Eliminar",

package/lang/es.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Se eliminó el elemento {value} de la lista de etiquetas",
 	"components.tag-list.interactive-label": "Lista de etiquetas, {count} elementos",
 	"components.tag-list.num-hidden": "+ {count} más",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "Lista de etiquetas",
 	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Seleccione para mostrar los elementos ocultos de la lista de etiquetas",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "Etiqueta",
 	"components.tag-list-item.tooltip-arrow-keys": "Teclas de flecha",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Mover entre etiquetas",
 	"components.tag-list-item.tooltip-delete-key": "Retroceso/Suprimir",

package/lang/fr-fr.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Suppression de l’élément de liste d’étiquettes {value}",
 	"components.tag-list.interactive-label": "Liste d’étiquettes, {count} éléments",
 	"components.tag-list.num-hidden": "{count} de plus",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "Liste d’étiquettes",
 	"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",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "Étiquette",
 	"components.tag-list-item.tooltip-arrow-keys": "Touches fléchées",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Passez d’une étiquette à l’autre",
 	"components.tag-list-item.tooltip-delete-key": "Retour arrière/Supprimer",

package/lang/fr.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Élément {value} de la liste des balises supprimé",
 	"components.tag-list.interactive-label": "Liste des balises, {count} éléments",
 	"components.tag-list.num-hidden": "+ {count} de plus",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "Liste des balises",
 	"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",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "Marquer",
 	"components.tag-list-item.tooltip-arrow-keys": "Touches fléchées",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Passer d’une balise à l’autre",
 	"components.tag-list-item.tooltip-delete-key": "Retour arrière/suppression",

package/lang/hi.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "टैग लिस्ट आइटम {value} हटाए गए",
 	"components.tag-list.interactive-label": "टैग लिस्ट, {count} आइटम",
 	"components.tag-list.num-hidden": "+ {count} और",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "टैग सूची",
 	"components.tag-list.show-less": "कम दिखाएँ",
 	"components.tag-list.show-more-description": "छिपे हुए टैग लिस्ट आइटम दिखाने के लिए चुनें",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "टैग",
 	"components.tag-list-item.tooltip-arrow-keys": "तीर कुंजियाँ",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "टैग के बीच आना-जाना",
 	"components.tag-list-item.tooltip-delete-key": "बैकस्पेस/हटाएँ",

package/lang/ja.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "タグリスト項目 {value} を削除しました",
 	"components.tag-list.interactive-label": "タグリスト、{count} 項目",
 	"components.tag-list.num-hidden": "+ {count} 件追加",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "タグリスト",
 	"components.tag-list.show-less": "少なく表示",
 	"components.tag-list.show-more-description": "選択すると、非表示のタグリスト項目が表示されます",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "タグ",
 	"components.tag-list-item.tooltip-arrow-keys": "矢印キー",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "タグ間を移動します",
 	"components.tag-list-item.tooltip-delete-key": "Backspace キー／Delete キー",

package/lang/ko.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "태그 목록 항목 {value}을(를) 제거했습니다",
 	"components.tag-list.interactive-label": "태그 목록, {count}개 항목",
 	"components.tag-list.num-hidden": "{count}개 더",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "태그 목록",
 	"components.tag-list.show-less": "간단히 표시",
 	"components.tag-list.show-more-description": "숨겨진 태그 목록 항목을 표시하려면 선택합니다",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "태그",
 	"components.tag-list-item.tooltip-arrow-keys": "화살표 키",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "태그 간에 이동합니다",
 	"components.tag-list-item.tooltip-delete-key": "백스페이스/삭제",

package/lang/nl.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Item {value} op de labellijst is verwijderd",
 	"components.tag-list.interactive-label": "Labellijst, {count} items",
 	"components.tag-list.num-hidden": "+ {count} extra",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "Labellijst",
 	"components.tag-list.show-less": "Minder weergeven",
 	"components.tag-list.show-more-description": "Selecteer deze optie om verborgen items op labellijsten weer te geven",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "Label",
 	"components.tag-list-item.tooltip-arrow-keys": "Pijltoetsen",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Schakelen tussen tags",
 	"components.tag-list-item.tooltip-delete-key": "Backspace/Verwijderen",

package/lang/pt.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Item {value} da lista de marcas removido",
 	"components.tag-list.interactive-label": "Lista de marcas, {count} itens",
 	"components.tag-list.num-hidden": "+ {count} mais",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "Lista de marcas",
 	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Selecione para mostrar itens ocultos da lista de marcas",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "Marca",
 	"components.tag-list-item.tooltip-arrow-keys": "Teclas de seta",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Mover entre marcas",
 	"components.tag-list-item.tooltip-delete-key": "Retroceder/Excluir",

package/lang/sv.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Ta bort tagglistobjektet {value}",
 	"components.tag-list.interactive-label": "Tagglista, {count} objekt",
 	"components.tag-list.num-hidden": "+ {count} till",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "Tagglista",
 	"components.tag-list.show-less": "Visa färre",
 	"components.tag-list.show-more-description": "Välj för att visa dolda tagglistobjekt",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "Tagg",
 	"components.tag-list-item.tooltip-arrow-keys": "Piltangenter",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Flytta mellan taggar",
 	"components.tag-list-item.tooltip-delete-key": "Backstegstangenten/Delete-tangenten",

package/lang/tr.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Kaldırılan etiket listesi öğesi {value}",
 	"components.tag-list.interactive-label": "Etiket Listesi, {count} öğe",
 	"components.tag-list.num-hidden": "+{count} tane daha",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "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",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "Etiket",
 	"components.tag-list-item.tooltip-arrow-keys": "Ok Tuşları",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Etiketler arasında gezinme",
 	"components.tag-list-item.tooltip-delete-key": "Geri Al/Sil",

package/lang/zh-cn.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "已移除标签列表项目 {value}",
 	"components.tag-list.interactive-label": "标签列表，{count} 个项目",
 	"components.tag-list.num-hidden": "+ {count} 个",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "标签列表",
 	"components.tag-list.show-less": "显示更少",
 	"components.tag-list.show-more-description": "选择以显示隐藏的标签列表项目",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "标记",
 	"components.tag-list-item.tooltip-arrow-keys": "箭头键",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "在标签之间移动",
 	"components.tag-list-item.tooltip-delete-key": "退格键/Delete 键",

package/lang/zh-tw.js

@@ -110,10 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "已移除標記清單項目 {value}",
 	"components.tag-list.interactive-label": "標記清單，{count} 個項目",
 	"components.tag-list.num-hidden": "還有 {count} 個",
-	"components.tag-list.role-description": "Tag List",
+	"components.tag-list.role-description": "標記列表",
 	"components.tag-list.show-less": "顯示更少",
 	"components.tag-list.show-more-description": "選取以顯示隱藏的標記清單項目",
-	"components.tag-list-item.role-description": "Tag",
+	"components.tag-list-item.role-description": "標記",
 	"components.tag-list-item.tooltip-arrow-keys": "方向鍵",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "在標記之間移動",
 	"components.tag-list-item.tooltip-delete-key": "退格/刪除",

package/package.json

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