@brightspace-ui/core 2.122.2 → 2.124.0

package/components/dialog/demo/dialog-fullscreen.html

@@ -86,13 +86,40 @@
 							document.querySelector('#dialogFullscreen').opened = true;
 						});
 						document.querySelector('#dialogFullscreen').addEventListener('d2l-dialog-close', (e) => {
-							console.log('confirm action:', e.detail.action);
+							console.log('dialog action:', e.detail.action);
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Fullscreen Dialog (no-padding)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button id="openNoPadding">Show Dialog</d2l-button>
+					<d2l-dialog-fullscreen id="dialogFullscreenNoPadding" title-text="Fullscreen Title" no-padding>
+						<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+						<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+						<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+						<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+						<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+
+						<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
+						<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+					</d2l-dialog-fullscreen>
+					<script>
+						document.querySelector('#openNoPadding').addEventListener('click', () => {
+							document.querySelector('#dialogFullscreenNoPadding').opened = true;
+						});
+						document.querySelector('#dialogFullscreenNoPadding').addEventListener('d2l-dialog-close', (e) => {
+							console.log('dialog action:', e.detail.action);
 						});
 					</script>
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Fullscreen Dialog with Content Overflow</h2>
+			<h2>Fullscreen Dialog (overflowing content)</h2>
 
 			<d2l-demo-snippet>
 				<template>
@@ -152,7 +179,7 @@
 							document.querySelector('#dialogFullscreenOverflow').opened = true;
 						});
 						document.querySelector('#dialogFullscreenOverflow').addEventListener('d2l-dialog-close', (e) => {
-							console.log('confirm action:', e.detail.action);
+							console.log('dialog action:', e.detail.action);
 						});
 					</script>
 				</template>
@@ -180,7 +207,7 @@
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Fullscreen Dialog using width property</h2>
+			<h2>Fullscreen Dialog (width)</h2>
 
 			<d2l-demo-snippet>
 				<template>
@@ -232,7 +259,7 @@
 							document.querySelector('#dialogWidth').opened = true;
 						});
 						document.querySelector('#dialogWidth').addEventListener('d2l-dialog-close', (e) => {
-							console.log('confirm action:', e.detail.action);
+							console.log('dialog action:', e.detail.action);
 						});
 					</script>
 				</template>

package/components/dialog/dialog-fullscreen.js

@@ -27,7 +27,11 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 			 * @type {boolean}
 			 */
 			async: { type: Boolean },
-
+			/**
+			 * Render with no content padding
+			 * @type {boolean}
+			 */
+			noPadding: { type: Boolean, reflect: true, attribute: 'no-padding' },
 			/**
 			 * The preferred width (unit-less) for the dialog. Maximum 1170.
 			 */
@@ -54,6 +58,10 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 				max-width: calc(100% - 3rem);
 			}
 
+			:host([no-padding]) .d2l-dialog-content {
+				padding: 0;
+			}
+
 			@media (min-width: 616px) {
 
 				.d2l-dialog-header {
@@ -74,6 +82,10 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 					height: calc(100% - 1rem);
 				}
 
+				:host([no-padding]) .d2l-dialog-content > div {
+					height: 100%;
+				}
+
 				.d2l-dialog-header > div > d2l-button-icon {
 					flex: none;
 					margin: -2px -12px 0 0;
@@ -178,6 +190,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 	constructor() {
 		super();
 		this.async = false;
+		this.noPadding = false;
 		this._autoSize = false;
 		this._hasFooterContent = false;
 		this._icon = 'tier1:close-large-thick';

package/components/dialog/dialog-styles.js

@@ -98,6 +98,8 @@ export const dialogStyles = css`
 		box-sizing: border-box;
 		flex: none;
 		padding: 19px 30px 23px 30px;
+		position: relative; /* stack header overflow shadow on top of content */
+		z-index: 1; /* stack header overflow shadow on top of content */
 	}
 
 	.d2l-dialog-outer.d2l-dialog-outer-overflow-top .d2l-dialog-header {
@@ -120,6 +122,10 @@ export const dialogStyles = css`
 		padding: 0 30px;
 	}
 
+	.d2l-dialog-content > div {
+		position: relative; /* make this the positioned parent for absolute positioned elements like d2l-template-primary-secondary */
+	}
+
 	.d2l-dialog-outer-scroll .d2l-dialog-content {
 		overflow: auto;
 	}
@@ -128,6 +134,7 @@ export const dialogStyles = css`
 		box-sizing: border-box;
 		flex: none;
 		padding: 30px 30px 12px 30px; /* 18px margin below footer children */
+		position: relative; /* stack footer overflow shadow on top of content */
 	}
 
 	.d2l-dialog-outer.d2l-dialog-outer-overflow-bottom .d2l-dialog-footer {

package/components/filter/README.md

@@ -195,6 +195,7 @@ The `d2l-filter-dimension-set` component is the main dimension type that will wo
 | `loading` | Boolean | Whether the values for this dimension are still loading and a loading spinner should be displayed |
 | `search-type` | String, default: `automatic` | `automatic` provides basic case-insensitive text comparison searching, `none` disables the search input, and `manual` fires an event for the consumer to handle the search and pass the keys of the values to be displayed |
 | `select-all` | Boolean | Whether to show a select all checkbox and selection summary for this dimension  |
+| `selected-first` | Boolean | Whether to render the selected items at the top of the filter  |
 | `selection-single` | Boolean | Whether only one value can be selected at a time for this dimension  |
 | `text` | String, required | Text for the dimension in the menu |
 | `value-only-active-filter-text` | Boolean | Whether to hide the dimension in the text sent to active filter subscribers |

package/components/filter/demo/filter.html

@@ -57,11 +57,11 @@
 			</template>
 		</d2l-demo-snippet>
 
-		<h2>Single Set Dimension - Header Text</h2>
+		<h2>Single Set Dimension - Header Text and Selected First</h2>
 		<d2l-demo-snippet>
 			<template>
 				<d2l-filter id="filter-single">
-					<d2l-filter-dimension-set key="course" introductory-text="Filter content by courses. Start typing any course name to explore." header-text="Skills Promoted at Your Company" text="Course" select-all>
+					<d2l-filter-dimension-set key="course" introductory-text="Filter content by courses. Start typing any course name to explore." header-text="Skills Promoted at Your Company" text="Course" select-all selected-first>
 						<d2l-filter-dimension-set-value key="art" text="Art" count="12"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" count="2" selected></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="biology" text="Biology" count="15"></d2l-filter-dimension-set-value>
@@ -94,7 +94,7 @@
 						<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-empty-state slot="search-empty-state" description="Search returned no results." action-text="Do something" action-href="https://d2l.com/"></d2l-filter-dimension-set-empty-state>
 					</d2l-filter-dimension-set>
-					<d2l-filter-dimension-set key="role" text="Role">
+					<d2l-filter-dimension-set key="role" text="Role" selected-first>
 						<d2l-filter-dimension-set-value key="admin" text="Admin" count="0"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="instructor" text="Instructor" count="22"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="student" text="Student" count="50"></d2l-filter-dimension-set-value>

package/components/filter/filter-dimension-set.js

@@ -41,6 +41,11 @@ class FilterDimensionSet extends LitElement {
 			 * @type {boolean}
 			 */
 			selectAll: { type: Boolean, attribute: 'select-all' },
+			/**
+			 * Whether to render the selected items at the top of the filter
+			 * @type {boolean}
+			 */
+			selectedFirst: { type: Boolean, attribute: 'selected-first' },
 			/**
 			 * Whether only one value can be selected at a time for this dimension
 			 * @type {boolean}
@@ -66,6 +71,7 @@ class FilterDimensionSet extends LitElement {
 		this.loading = false;
 		this.searchType = 'automatic';
 		this.selectAll = false;
+		this.selectedFirst = false;
 		this.selectionSingle = false;
 		this.text = '';
 		this.valueOnlyActiveFilterText = false;

package/components/filter/filter.js

@@ -275,6 +275,18 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		`;
 	}
 
+	update(changedProperties) {
+		if (
+			changedProperties.has('opened')
+			&& this.opened
+			&& this._dimensions.length === 1
+			&& this._dimensions[0].selectedFirst
+		) {
+			this._updateDimensionShouldBubble(this._dimensions[0]);
+		}
+		super.update(changedProperties);
+	}
+
 	requestFilterClearAll() {
 		this._handleClearAll();
 	}
@@ -505,6 +517,17 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			listLabel = dimension.headerText;
 		}
 
+		let selectedListItems = nothing;
+		let listItems = nothing;
+		if (dimension.selectedFirst) {
+			if (listLabel) listLabel = this.localize('components.filter.selectedFirstListLabel', { headerText: dimension.headerText });
+			selectedListItems = dimension.values.filter(item => item.shouldBubble).map(item => this._createSetDimensionItem(item));
+
+			listItems = dimension.values.filter(item => !item.shouldBubble).map(item => this._createSetDimensionItem(item));
+		} else {
+			listItems = dimension.values.map(item => this._createSetDimensionItem(item));
+		}
+
 		return html`
 			${searchResults}
 			<d2l-list
@@ -515,25 +538,30 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				label="${ifDefined(listLabel)}"
 				?selection-single="${dimension.selectionSingle}"
 				separators="between">
+				${selectedListItems}
 				${listHeader}
-				${dimension.values.map(item => html`
-					<d2l-list-item
-						?selection-disabled="${item.disabled}"
-						?hidden="${item.hidden}"
-						key="${item.key}"
-						label="${item.text}"
-						selectable
-						?selected="${item.selected}">
-						<div class="d2l-filter-dimension-set-value d2l-body-compact">
-							<div class="d2l-filter-dimension-set-value-text">${item.text}</div>
-							${item.count !== undefined ? html`<div class="d2l-body-small">(${formatNumber(item.count)})</div>` : nothing}
-						</div>
-					</d2l-list-item>
-				`)}
+				${listItems}
 			</d2l-list>
 		`;
 	}
 
+	_createSetDimensionItem(item) {
+		return html`
+			<d2l-list-item
+				?selection-disabled="${item.disabled}"
+				?hidden="${item.hidden}"
+				key="${item.key}"
+				label="${item.text}"
+				selectable
+				?selected="${item.selected}">
+				<div class="d2l-filter-dimension-set-value d2l-body-compact">
+					<div class="d2l-filter-dimension-set-value-text">${item.text}</div>
+					${item.count !== undefined ? html`<div class="d2l-body-small">(${formatNumber(item.count)})</div>` : nothing}
+				</div>
+			</d2l-list-item>
+		`;
+	}
+
 	_dispatchChangeEvent(dimension, change) {
 		this._setDimensionChangeEvent(dimension, change, false);
 
@@ -689,6 +717,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this._activeDimensionKey = e.detail.sourceView.getAttribute('data-key');
 		const dimension = this._dimensions.find(dimension => dimension.key === this._activeDimensionKey);
 		if (dimension.introductoryText) announce(dimension.introductoryText);
+		if (dimension.selectedFirst) this._updateDimensionShouldBubble(dimension);
 		this._dispatchDimensionFirstOpenEvent(this._activeDimensionKey);
 	}
 
@@ -720,6 +749,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		const searchValue = e.detail.value.trim();
 		dimension.searchValue = searchValue;
 
+		if (dimension.selectedFirst) {
+			this._updateDimensionShouldBubble(dimension);
+		}
+
 		if (dimension.searchType === 'automatic' || searchValue === '') {
 			this._performDimensionSearch(dimension);
 		} else if (dimension.searchType === 'manual') {
@@ -763,6 +796,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 					info.introductoryText = dimension.introductoryText;
 					info.searchType = dimension.searchType;
 					info.searchValue = '';
+					info.selectedFirst = dimension.selectedFirst;
 					info.selectionSingle = dimension.selectionSingle;
 					if (dimension.selectAll && !dimension.selectionSingle) info.selectAllIdPrefix = SET_DIMENSION_ID_PREFIX;
 					info.searchEmptyState = dimension.getSearchEmptyState();
@@ -917,6 +951,12 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		subscribers.forEach(subscriber => subscriber.updateActiveFilters(this.id, this._activeFilters));
 	}
 
+	_updateDimensionShouldBubble(dimension) {
+		for (const value of dimension.values) {
+			value.shouldBubble = value.selected;
+		}
+	}
+
 }
 
 customElements.define('d2l-filter', Filter);

package/custom-elements.json

@@ -1948,6 +1948,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "no-padding",
+          "description": "Render with no content padding",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "width",
           "description": "The preferred width (unit-less) for the dialog. Maximum 1170.",
@@ -1974,6 +1980,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "noPadding",
+          "attribute": "no-padding",
+          "description": "Render with no content padding",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "width",
           "attribute": "width",
@@ -3796,6 +3809,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "selected-first",
+          "description": "Whether to render the selected items at the top of the filter",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selection-single",
           "description": "Whether only one value can be selected at a time for this dimension",
@@ -3857,6 +3876,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "selectedFirst",
+          "attribute": "selected-first",
+          "description": "Whether to render the selected items at the top of the filter",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selectionSingle",
           "attribute": "selection-single",

package/lang/ar.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "عوامل التصفية",
 	"components.filter.noFilters": "ما من عوامل تصفية متوفرة",
 	"components.filter.searchResults": "{number, plural, =0 {ما من نتائج بحث} one {{number} نتيجة بحث}‏ other {{number} من نتائج البحث}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "التصفية حسب: {filterName}",
 	"components.form-element.defaultError": "{label} غير صالحة.",
 	"components.form-element.defaultFieldLabel": "الحقل",

package/lang/cy.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Hidlyddion",
 	"components.filter.noFilters": "Dim hidlyddion ar gael",
 	"components.filter.searchResults": "{number, plural, =0 {Dim canlyniadau chwilio} one {{number} canlyniad chwilio} other {{number} canlyniadau chwilio}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Hidlo yn ôl: {filterName}",
 	"components.form-element.defaultError": "Mae {label} yn annilys.",
 	"components.form-element.defaultFieldLabel": "Maes",

package/lang/da.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filtre",
 	"components.filter.noFilters": "Ingen tilgængelige filtre",
 	"components.filter.searchResults": "{number, plural, =0 {Ingen søgeresultater} one {{number} søgeresultat} other {{number} søgeresultater}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtrer efter: {filterName}",
 	"components.form-element.defaultError": "{label} er ugyldigt.",
 	"components.form-element.defaultFieldLabel": "Felt",

package/lang/de.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filter",
 	"components.filter.noFilters": "Keine verfügbaren Filter",
 	"components.filter.searchResults": "{number, plural, =0 {Kein Suchergebnis} one {{number} Suchergebnis} other {{number} Suchergebnisse}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtern nach: {filterName}",
 	"components.form-element.defaultError": "{label} ist ungültig.",
 	"components.form-element.defaultFieldLabel": "Feld",

package/lang/en-gb.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filters",
 	"components.filter.noFilters": "No available filters",
 	"components.filter.searchResults": "{number, plural, =0 {No search results} one {{number} search result} other {{number} search results}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filter by: {filterName}",
 	"components.form-element.defaultError": "{label} is invalid.",
 	"components.form-element.defaultFieldLabel": "Field",

package/lang/en.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filters",
 	"components.filter.noFilters": "No available filters",
 	"components.filter.searchResults": "{number, plural, =0 {No search results} one {{number} search result} other {{number} search results}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filter by: {filterName}",
 	"components.form-element.defaultError": "{label} is invalid.",
 	"components.form-element.defaultFieldLabel": "Field",

package/lang/es-es.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filtros",
 	"components.filter.noFilters": "No hay filtros disponibles",
 	"components.filter.searchResults": "{number, plural, =0 {No hay resultados de búsqueda} one {{number} resultado de búsqueda} other {{number} resultados de búsqueda}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtrar por: {filterName}",
 	"components.form-element.defaultError": "{label} no es válido.",
 	"components.form-element.defaultFieldLabel": "Campo",

package/lang/es.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filtros",
 	"components.filter.noFilters": "No hay filtros disponibles",
 	"components.filter.searchResults": "{number, plural, =0 {No se encontraron resultados de búsqueda} one {{number} resultado de búsqueda} other {{number} resultados de búsqueda}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtrar por: {filterName}",
 	"components.form-element.defaultError": "{label} no es válida.",
 	"components.form-element.defaultFieldLabel": "Campo",

package/lang/fr-fr.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filtres",
 	"components.filter.noFilters": "Aucun filtre disponible",
 	"components.filter.searchResults": "{number, plural, =0 {Aucun résultat de recherche} one {{number} résultat de recherche} other {{number} résultats de recherche}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtrer par : {filterName}",
 	"components.form-element.defaultError": "{label} n'est pas valide.",
 	"components.form-element.defaultFieldLabel": "Champ",

package/lang/fr.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filtres",
 	"components.filter.noFilters": "Aucun filtre disponible",
 	"components.filter.searchResults": "{number, plural, =0 {Aucun résultat de recherche} one {{number} résultat de recherche} other {{number} résultats de recherche}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtrer par : {filterName}",
 	"components.form-element.defaultError": "{label} n'est pas valide.",
 	"components.form-element.defaultFieldLabel": "Champ",

package/lang/hi.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "फ़िल्टर्स",
 	"components.filter.noFilters": "कोई उपलब्ध फ़िल्टर्स नहीं",
 	"components.filter.searchResults": "{number, plural, =0 {कोई खोज परिणाम नहीं} one {{number} खोज परिणाम} other {{number} खोज परिणाम}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "इसके अनुसार फ़िल्टर करें: {filterName}",
 	"components.form-element.defaultError": "{label} अमान्य है।",
 	"components.form-element.defaultFieldLabel": "फ़ील्ड",

package/lang/ja.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "フィルタ",
 	"components.filter.noFilters": "使用可能なフィルタはありません",
 	"components.filter.searchResults": "{number, plural, =0 {検索結果なし} other {{number} 件の検索結果}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "フィルタ条件: {filterName}",
 	"components.form-element.defaultError": "{label} は無効です。",
 	"components.form-element.defaultFieldLabel": "フィールド",

package/lang/ko.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "개 필터",
 	"components.filter.noFilters": "사용 가능한 필터가 없습니다",
 	"components.filter.searchResults": "{number, plural, =0 {검색 결과 없음} other {{number}개 검색 결과}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "필터 기준: {filterName}",
 	"components.form-element.defaultError": "{label}이(가) 잘못되었습니다.",
 	"components.form-element.defaultFieldLabel": "필드",

package/lang/nl.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filters", // mfv-translated
 	"components.filter.noFilters": "Geen beschikbare filters",
 	"components.filter.searchResults": "{number, plural, =0 {Geen zoekresultaten} one {{number} zoekresultaat} other {{number} zoekresultaten}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filter op {filterName}",
 	"components.form-element.defaultError": "{label} is ongeldig.",
 	"components.form-element.defaultFieldLabel": "Veld",

package/lang/pt.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filtros",
 	"components.filter.noFilters": "Não há filtros disponíveis",
 	"components.filter.searchResults": "{number, plural, =0 {Sem resultados para a pesquisa} one {{number} resultado para a pesquisa} other {{number} resultados para a pesquisa}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtrar por: {filterName}",
 	"components.form-element.defaultError": "{label} é inválido.",
 	"components.form-element.defaultFieldLabel": "Campo",

package/lang/sv.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filter",
 	"components.filter.noFilters": "Inga tillgängliga filter",
 	"components.filter.searchResults": "{number, plural, =0 {Inga sökresultat} one {{number} sökresultat} other {{number} sökresultat}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtrera efter: {filterName}",
 	"components.form-element.defaultError": "{label} är ogiltig.",
 	"components.form-element.defaultFieldLabel": "Fält",

package/lang/tr.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "Filtre",
 	"components.filter.noFilters": "Uygun filtre yok",
 	"components.filter.searchResults": "{number, plural, =0 {Arama sonucu yok} one {{number} arama sonucu} other {{number} arama sonucu}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "Filtreleme ölçütü: {filterName}",
 	"components.form-element.defaultError": "{label} geçersiz.",
 	"components.form-element.defaultFieldLabel": "Alan",

package/lang/zh-cn.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "个筛选条件",
 	"components.filter.noFilters": "无可用筛选器",
 	"components.filter.searchResults": "{number, plural, =0 {无搜索结果} other {{number} 个搜索结果}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "筛选依据：{filterName}",
 	"components.form-element.defaultError": "{label} 无效。",
 	"components.form-element.defaultFieldLabel": "字段",

package/lang/zh-tw.js

@@ -21,6 +21,7 @@ export default {
 	"components.filter.filters": "篩選器",
 	"components.filter.noFilters": "沒有可用的篩選條件",
 	"components.filter.searchResults": "{number, plural, =0 {無搜尋結果} other {{number} 個搜尋結果}}",
+	"components.filter.selectedFirstListLabel": "{headerText}. Selected filters appear first.",
 	"components.filter.singleDimensionDescription": "按此條件篩選：{filterName}",
 	"components.form-element.defaultError": "{label} 無效。",
 	"components.form-element.defaultFieldLabel": "欄位",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.122.2",
+  "version": "2.124.0",
   "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/demo/integration.html

@@ -55,8 +55,7 @@
 
 				<d2l-list item-count="50" extend-separators>
 					<d2l-list-controls slot="controls" select-all-pages-allowed>
-					<d2l-button-icon icon="tier1:gear" id="openMainDialog" text="Open"></d2l-button-icon>
-						<d2l-selection-action icon="tier1:plus-default" text="Add"></d2l-selection-action>
+						<d2l-selection-action id="openMainDialog" icon="tier1:plus-default" text="Add"></d2l-selection-action>
 						<d2l-selection-action-dropdown text="Move To" requires-selection>
 							<d2l-dropdown-menu>
 								<d2l-menu label="Move To Options">
@@ -342,19 +341,33 @@
 					</d2l-list-item>
 				</d2l-list>
 
-				<d2l-dialog-fullscreen id="dialogMain" title-text="Dialog Title">
-					<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
-					<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
-					<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
-					<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
-					<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
-					<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+				<d2l-dialog-fullscreen id="dialogMain" title-text="Dialog Title" no-padding>
+					<d2l-template-primary-secondary resizable storage-key="demo-dialog">
+						<div slot="header" style="background-color: #dddddd; padding: 1rem;">Primary/Secondary Controls</div>
+						<div slot="primary" style="padding: 1rem;">
+							<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+							<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+							<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+							<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+							<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+							<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						</div>
+						<div slot="secondary" style="padding: 1rem;">
+							<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+							<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+							<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+							<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+							<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+							<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						</div>
+						<div slot="footer">Primary/Secondary Footer</div>
+					</d2l-template-primary-secondary>
 					<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
 					<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
 				</d2l-dialog-fullscreen>
 
 				<script>
-					document.querySelector('#openMainDialog').addEventListener('click', () => {
+					document.querySelector('#openMainDialog').addEventListener('d2l-selection-action-click', () => {
 						document.querySelector('#dialogMain').opened = true;
 					});
 					document.querySelector('#dialogMain').addEventListener('d2l-dialog-close', (e) => {