@brightspace-ui/core 3.277.0 → 3.279.0

package/components/table/table-wrapper.js

@@ -2,13 +2,15 @@ import '../colors/colors.js';
 import '../scroll-wrapper/scroll-wrapper.js';
 import '../backdrop/backdrop-loading.js';
 import { css, html, LitElement, nothing } from 'lit';
+import { freshness, FreshnessMixin } from '../../mixins/freshness/freshness-mixin.js';
 import { cssSizes } from '../inputs/input-checkbox-styles.js';
 import { getComposedParent } from '../../helpers/dom.js';
 import { isPopoverSupported } from '../popover/popover-mixin.js';
 import { PageableMixin } from '../paging/pageable-mixin.js';
-import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 import { SelectionMixin } from '../selection/selection-mixin.js';
 
+export const tableFreshness = freshness;
+
 export const tableStyles = css`
 	.d2l-table {
 		border-collapse: separate; /* needed to override reset stylesheets */
@@ -263,9 +265,24 @@ const SELECTORS = {
  * @slot controls - Slot for `d2l-table-controls` to be rendered above the table
  * @slot pager - Slot for `d2l-pager-load-more` to be rendered below the table
  */
-export class TableWrapper extends PropertyRequiredMixin(PageableMixin(SelectionMixin(LitElement))) {
+export class TableWrapper extends FreshnessMixin(PageableMixin(SelectionMixin(LitElement))) {
 
 	static properties = {
+		/**
+		 * Todo: remove once consumers are updated to freshness. Use freshness instead.
+		 * @ignore
+		 */
+		dataState: { reflect: true, type: String },
+		/**
+		 * Todo: remove once consumers are updated to freshness-stale-text. Use freshness-stale-text instead.
+		 * @ignore
+		 */
+		dirtyText: { reflect: true, attribute: 'dirty-text', type: String },
+		/**
+		 * Todo: remove once consumers are updated to freshness-stale-button-text. Use freshness-stale-button-text instead.
+		 * @ignore
+		 */
+		dirtyButtonText: { reflect: true, attribute: 'dirty-button-text', type: String },
 		/**
 		 * Hides the column borders on "default" table type
 		 * @type {boolean}
@@ -307,40 +324,6 @@ export class TableWrapper extends PropertyRequiredMixin(PageableMixin(SelectionM
 			attribute: '_no-scroll-width',
 			reflect: true,
 			type: Boolean,
-		},
-		/**
-		 * The state of data in the table. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed
-		 * @type {'clean'|'dirty'|'loading'}
-		 */
-		dataState: {
-			reflect: true,
-			type: String
-		},
-		/**
-		 * The text displayed on the dirty state overlay when the 'dirty' dataState is set.
-		 * @type {string}
-		 */
-		dirtyText: {
-			reflect: true,
-			attribute: 'dirty-text',
-			required: {
-				dependentProps: ['dataState'],
-				validator: (_value, elem, hasValue) => hasValue || elem.dataState !== 'dirty'
-			},
-			type: String
-		},
-		/**
-		 * The text displayed on the button dirty state overlay when the 'dirty' dataState is set.
-		 * @type {string}
-		 */
-		dirtyButtonText: {
-			reflect: true,
-			attribute: 'dirty-button-text',
-			required: {
-				dependentProps: ['dataState'],
-				validator: (_value, elem, hasValue) => hasValue || elem.dataState !== 'dirty'
-			},
-			type: String
 		}
 	};
 
@@ -409,10 +392,6 @@ export class TableWrapper extends PropertyRequiredMixin(PageableMixin(SelectionM
 		this._tableIntersectionObserver = null;
 		this._tableMutationObserver = null;
 		this._tableScrollers = {};
-		this.dataState = 'clean';
-
-		this.dirtyText = null;
-		this.dirtyButtonText = null;
 	}
 
 	connectedCallback() {
@@ -444,7 +423,7 @@ export class TableWrapper extends PropertyRequiredMixin(PageableMixin(SelectionM
 		const slot = html`
 			<div style="position:relative">
 				<slot id="table-slot" @slotchange="${this._handleSlotChange}"></slot>
-				<d2l-backdrop-loading @d2l-backdrop-dirty-overlay-action=${this._handleDirtyButton} for="table-slot" dataState=${this.dataState} dirty-text="${this.dirtyText}" dirty-button-text="${this.dirtyButtonText}"></d2l-backdrop-loading>
+				<d2l-backdrop-loading @d2l-backdrop-stale-overlay-action="${this._handleStaleButton}" for="table-slot" freshness="${this.freshness}" freshness-stale-text="${this.freshnessStaleText}" freshness-stale-button-text="${this.freshnessStaleButtonText}"></d2l-backdrop-loading>
 			</div>
 		`;
 		const useScrollWrapper = this.stickyHeadersScrollWrapper || !this.stickyHeaders;
@@ -469,6 +448,19 @@ export class TableWrapper extends PropertyRequiredMixin(PageableMixin(SelectionM
 		}
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+
+		// Todo: remove these once consumers are updated to freshness properties
+		if (this.dataState) {
+			if (this.dataState === 'clean') this.freshness = freshness.fresh;
+			else if (this.dataState === 'dirty') this.freshness = freshness.stale;
+			else if (this.dataState === 'loading') this.freshness = freshness.loading;
+		}
+		if (this.dirtyText) this.freshnessStaleText = this.dirtyText;
+		if (this.dirtyButtonText) this.freshnessStaleButtonText = this.dirtyButtonText;
+	}
+
 	#hasIntersected = false;
 
 	#noScrollWidthTimeout = null;
@@ -571,11 +563,6 @@ export class TableWrapper extends PropertyRequiredMixin(PageableMixin(SelectionM
 		this._handleControlsChange();
 	}
 
-	_handleDirtyButton() {
-		/** Dispatched when the action button on the dirty overlay is clicked */
-		this.dispatchEvent(new CustomEvent('d2l-table-dirty-button-clicked'));
-	}
-
 	_handlePopoverClose(e) {
 		this._updateStickyAncestor(e.target, false);
 	}
@@ -630,6 +617,14 @@ export class TableWrapper extends PropertyRequiredMixin(PageableMixin(SelectionM
 		this._handleTableChange();
 	}
 
+	_handleStaleButton() {
+		/** Dispatched when the action button on the stale overlay is clicked */
+		this.dispatchEvent(new CustomEvent('d2l-table-stale-button-click'));
+
+		/** @ignore Todo: remove once consumers are updated to d2l-table-stale-button-click */
+		this.dispatchEvent(new CustomEvent('d2l-table-dirty-button-clicked'));
+	}
+
 	async _handleTableChange(mutationRecords) {
 		const updateList = [];
 

package/custom-elements.json

@@ -196,104 +196,104 @@
       ]
     },
     {
-      "name": "d2l-backdrop-dirty-overlay",
-      "path": "./components/backdrop/backdrop-dirty-overlay.js",
-      "description": "The `d2l-backdrop-dirty-overlay` component is used to render a dialog with text and an action over another element that needs to be refreshed after user input.",
+      "name": "d2l-backdrop-loading",
+      "path": "./components/backdrop/backdrop-loading.js",
+      "description": "A component for displaying a semi-transparent backdrop and a loading spinner over the containing element",
       "attributes": [
         {
-          "name": "description",
-          "description": "The text displayed on the dirty state overlay.",
+          "name": "for",
+          "description": "Used to identify content that the backdrop should make inert",
+          "type": "string"
+        },
+        {
+          "name": "freshness-stale-button-text",
+          "description": "The button text in the overlay when 'stale'",
           "type": "string"
         },
         {
-          "name": "action",
-          "description": "The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.",
+          "name": "freshness-stale-text",
+          "description": "The text message in the overlay when 'stale'",
           "type": "string"
+        },
+        {
+          "name": "freshness",
+          "description": "The freshness of the component data",
+          "type": "'fresh'|'stale'|'loading'",
+          "default": "\"\\\"fresh\\\"\""
         }
       ],
       "properties": [
         {
-          "name": "description",
-          "attribute": "description",
-          "description": "The text displayed on the dirty state overlay.",
+          "name": "for",
+          "attribute": "for",
+          "description": "Used to identify content that the backdrop should make inert",
           "type": "string"
         },
         {
-          "name": "action",
-          "attribute": "action",
-          "description": "The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.",
+          "name": "styles",
+          "type": "array",
+          "default": "[null]"
+        },
+        {
+          "name": "freshnessStaleButtonText",
+          "attribute": "freshness-stale-button-text",
+          "description": "The button text in the overlay when 'stale'",
           "type": "string"
         },
         {
-          "name": "styles",
-          "type": "array",
-          "default": "[\"bodyCompactStyles\",\"overlayStyles\",null]"
-        }
-      ],
-      "events": [
+          "name": "freshnessStaleText",
+          "attribute": "freshness-stale-text",
+          "description": "The text message in the overlay when 'stale'",
+          "type": "string"
+        },
         {
-          "name": "d2l-backdrop-dirty-overlay-action",
-          "description": "Dispatched when the action button on the overlay is clicked"
+          "name": "freshness",
+          "attribute": "freshness",
+          "description": "The freshness of the component data",
+          "type": "'fresh'|'stale'|'loading'",
+          "default": "\"\\\"fresh\\\"\""
         }
       ]
     },
     {
-      "name": "d2l-backdrop-loading",
-      "path": "./components/backdrop/backdrop-loading.js",
-      "description": "A component for displaying a semi-transparent backdrop and a loading spinner over the containing element",
+      "name": "d2l-backdrop-stale-overlay",
+      "path": "./components/backdrop/backdrop-stale-overlay.js",
+      "description": "A component to render as an overlay over another element with stale data.",
       "attributes": [
         {
-          "name": "for",
-          "description": "Used to identify content that the backdrop should make inert",
-          "type": "string"
-        },
-        {
-          "name": "dirty-text",
-          "description": "The text displayed on the dirty state overlay when the 'dirty' dataState is set.",
+          "name": "button-text",
+          "description": "The action button text",
           "type": "string"
         },
         {
-          "name": "dirty-button-text",
-          "description": "The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.",
+          "name": "text",
+          "description": "The text displayed on the overlay",
           "type": "string"
-        },
-        {
-          "name": "dataState",
-          "description": "The state of data in the element being overlaid. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed",
-          "type": "'clean'|'dirty'|'loading'",
-          "default": "\"clean\""
         }
       ],
       "properties": [
         {
-          "name": "for",
-          "attribute": "for",
-          "description": "Used to identify content that the backdrop should make inert",
-          "type": "string"
-        },
-        {
-          "name": "dirtyText",
-          "attribute": "dirty-text",
-          "description": "The text displayed on the dirty state overlay when the 'dirty' dataState is set.",
+          "name": "buttonText",
+          "attribute": "button-text",
+          "description": "The action button text",
           "type": "string"
         },
         {
-          "name": "dirtyButtonText",
-          "attribute": "dirty-button-text",
-          "description": "The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.",
+          "name": "text",
+          "attribute": "text",
+          "description": "The text displayed on the overlay",
           "type": "string"
         },
         {
           "name": "styles",
           "type": "array",
-          "default": "[null]"
-        },
+          "default": "[\"bodyCompactStyles\",null]"
+        }
+      ],
+      "events": [
         {
-          "name": "dataState",
-          "attribute": "dataState",
-          "description": "The state of data in the element being overlaid. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed",
-          "type": "'clean'|'dirty'|'loading'",
-          "default": "\"clean\""
+          "name": "d2l-backdrop-stale-overlay-action",
+          "description": "Dispatched when the action button on the overlay is clicked"
         }
       ]
     },
@@ -13540,7 +13540,7 @@
       "properties": [
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 16; /* To be over sticky content of our core components and the divider */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers */\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components and divider */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 16; /* To be over sticky content of our core components and the divider */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers */\\n\\t\\t}\\n\\n\\t\\t.side-nav .divider[collapsed] {\\n\\t\\t\\tmargin-inline-start: 18px;\\n\\t\\t}\\n\\t\\t.supporting .divider[collapsed] {\\n\\t\\t\\tmargin-inline-end: 18px;\\n\\t\\t}\\n\\t\\t.side-nav-panel.collapsed,\\n\\t\\t.supporting-panel.collapsed {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t@media (prefers-reduced-motion: no-preference) {\\n\\t\\t\\t.side-nav-panel.animate,\\n\\t\\t\\t.supporting-panel.animate {\\n\\t\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t\\t}\\n\\t\\t\\t.side-nav-panel.animate.collapsed,\\n\\t\\t\\t.supporting-panel.animate.collapsed {\\n\\t\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1), visibility 0s 400ms;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components and divider */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "widthType",
@@ -15743,20 +15743,20 @@
           "default": "\"default\""
         },
         {
-          "name": "dataState",
-          "description": "The state of data in the table. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed",
-          "type": "'clean'|'dirty'|'loading'",
-          "default": "\"clean\""
+          "name": "freshness-stale-button-text",
+          "description": "The button text in the overlay when 'stale'",
+          "type": "string"
         },
         {
-          "name": "dirty-text",
-          "description": "The text displayed on the dirty state overlay when the 'dirty' dataState is set.",
+          "name": "freshness-stale-text",
+          "description": "The text message in the overlay when 'stale'",
           "type": "string"
         },
         {
-          "name": "dirty-button-text",
-          "description": "The text displayed on the button dirty state overlay when the 'dirty' dataState is set.",
-          "type": "string"
+          "name": "freshness",
+          "description": "The freshness of the component data",
+          "type": "'fresh'|'stale'|'loading'",
+          "default": "\"fresh\""
         },
         {
           "name": "item-count",
@@ -15840,23 +15840,23 @@
           "default": "\"default\""
         },
         {
-          "name": "dataState",
-          "attribute": "dataState",
-          "description": "The state of data in the table. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed",
-          "type": "'clean'|'dirty'|'loading'",
-          "default": "\"clean\""
+          "name": "freshnessStaleButtonText",
+          "attribute": "freshness-stale-button-text",
+          "description": "The button text in the overlay when 'stale'",
+          "type": "string"
         },
         {
-          "name": "dirtyText",
-          "attribute": "dirty-text",
-          "description": "The text displayed on the dirty state overlay when the 'dirty' dataState is set.",
+          "name": "freshnessStaleText",
+          "attribute": "freshness-stale-text",
+          "description": "The text message in the overlay when 'stale'",
           "type": "string"
         },
         {
-          "name": "dirtyButtonText",
-          "attribute": "dirty-button-text",
-          "description": "The text displayed on the button dirty state overlay when the 'dirty' dataState is set.",
-          "type": "string"
+          "name": "freshness",
+          "attribute": "freshness",
+          "description": "The freshness of the component data",
+          "type": "'fresh'|'stale'|'loading'",
+          "default": "\"fresh\""
         },
         {
           "name": "itemCount",
@@ -15879,8 +15879,8 @@
       ],
       "events": [
         {
-          "name": "d2l-table-dirty-button-clicked",
-          "description": "Dispatched when the action button on the dirty overlay is clicked"
+          "name": "d2l-table-stale-button-click",
+          "description": "Dispatched when the action button on the stale overlay is clicked"
         }
       ],
       "slots": [
@@ -16214,20 +16214,20 @@
           "default": "\"default\""
         },
         {
-          "name": "dataState",
-          "description": "The state of data in the table. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed",
-          "type": "'clean'|'dirty'|'loading'",
-          "default": "\"clean\""
+          "name": "freshness-stale-button-text",
+          "description": "The button text in the overlay when 'stale'",
+          "type": "string"
         },
         {
-          "name": "dirty-text",
-          "description": "The text displayed on the dirty state overlay when the 'dirty' dataState is set.",
+          "name": "freshness-stale-text",
+          "description": "The text message in the overlay when 'stale'",
           "type": "string"
         },
         {
-          "name": "dirty-button-text",
-          "description": "The text displayed on the button dirty state overlay when the 'dirty' dataState is set.",
-          "type": "string"
+          "name": "freshness",
+          "description": "The freshness of the component data",
+          "type": "'fresh'|'stale'|'loading'",
+          "default": "\"\\\"fresh\\\"\""
         },
         {
           "name": "item-count",
@@ -16275,23 +16275,23 @@
           "default": "\"default\""
         },
         {
-          "name": "dataState",
-          "attribute": "dataState",
-          "description": "The state of data in the table. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed",
-          "type": "'clean'|'dirty'|'loading'",
-          "default": "\"clean\""
+          "name": "freshnessStaleButtonText",
+          "attribute": "freshness-stale-button-text",
+          "description": "The button text in the overlay when 'stale'",
+          "type": "string"
         },
         {
-          "name": "dirtyText",
-          "attribute": "dirty-text",
-          "description": "The text displayed on the dirty state overlay when the 'dirty' dataState is set.",
+          "name": "freshnessStaleText",
+          "attribute": "freshness-stale-text",
+          "description": "The text message in the overlay when 'stale'",
           "type": "string"
         },
         {
-          "name": "dirtyButtonText",
-          "attribute": "dirty-button-text",
-          "description": "The text displayed on the button dirty state overlay when the 'dirty' dataState is set.",
-          "type": "string"
+          "name": "freshness",
+          "attribute": "freshness",
+          "description": "The freshness of the component data",
+          "type": "'fresh'|'stale'|'loading'",
+          "default": "\"\\\"fresh\\\"\""
         },
         {
           "name": "itemCount",
@@ -16314,8 +16314,8 @@
       ],
       "events": [
         {
-          "name": "d2l-table-dirty-button-clicked",
-          "description": "Dispatched when the action button on the dirty overlay is clicked"
+          "name": "d2l-table-stale-button-click",
+          "description": "Dispatched when the action button on the stale overlay is clicked"
         }
       ],
       "slots": [

package/lang/ar.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "إغلاق التنبيه",
 	"components.backdrop-loading.loadingAnnouncement": "جارٍ التحميل",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "اكتمل التحميل.",
+	"components.backdrop-stale-overlay.message": "This data is out of date.",
 	"components.breadcrumbs.breadcrumb": "مسار التنقل",
 	"components.button-add.addItem": "إضافة عنصر",
 	"components.button-copy.copied": "تم النسخ!",
@@ -135,13 +136,13 @@ export default {
 	"components.list-item.addItem": "إضافة عنصر",
 	"components.list-item-drag-handle.default": "إعادة ترتيب إجراء المادة لـ {name}",
 	"components.list-item-drag-handle.keyboard": "قم بإعادة ترتيب العنصر، الموضع الحالي {currentPosition} من {size}. لنقل هذا العنصر، اضغط على سهما لأعلى أو لأسفل.",
-	"components.list-item-drag-handle.side-to-side.keyboard": "Reorder item, current position {currentPosition} out of {size}. To move this item, press left or right arrows.",
+	"components.list-item-drag-handle.side-to-side.keyboard": "قم بإعادة ترتيب العنصر، الموضع الحالي {currentPosition} من {size}. لنقل هذا العنصر، اضغط على سهمي اليسار أو اليمين.",
 	"components.list-item-drag-handle-tooltip.enter-desc": "تبديل وضع إعادة ترتيب لوحة المفاتيح.",
 	"components.list-item-drag-handle-tooltip.enter-key": "إدخال",
 	"components.list-item-drag-handle-tooltip.left-right-desc": "غيِّر مستوى التداخل.",
 	"components.list-item-drag-handle-tooltip.left-right-key": "يسار/يمين",
-	"components.list-item-drag-handle-tooltip.side-to-side.left-right-desc": "Move item left or right in the list.",
-	"components.list-item-drag-handle-tooltip.side-to-side.up-down-desc": "Move item left or right in the list.",
+	"components.list-item-drag-handle-tooltip.side-to-side.left-right-desc": "نقل العنصر إلى اليسار أو اليمين في القائمة.",
+	"components.list-item-drag-handle-tooltip.side-to-side.up-down-desc": "نقل العنصر إلى اليسار أو اليمين في القائمة.",
 	"components.list-item-drag-handle-tooltip.title": "عناصر التحكم بلوحة المفاتيح لإعادة الترتيب:",
 	"components.list-item-drag-handle-tooltip.up-down-desc": "نقل المادة إلى الأعلى أو الأسفل في القائمة.",
 	"components.list-item-drag-handle-tooltip.up-down-key": "أعلى/أسفل",
@@ -155,12 +156,12 @@ export default {
 	"components.more-less.more": "المزيد",
 	"components.object-property-list.item-placeholder-text": "عنصر نائب",
 	"components.overflow-group.moreActions": "مزيد من الإجراءات",
-	"components.page.footer-region-label": "Footer",
+	"components.page.footer-region-label": "التذييل",
 	"components.page.header-nav-label": "الرئيسية",
-	"components.page.side-nav-divider-label": "Side Navigation Divider",
+	"components.page.side-nav-divider-label": "مقسّم التنقل الجانبي",
 	"components.page.side-nav-label": "جانبية",
-	"components.page.supporting-divider-label": "Supporting Panel Divider",
-	"components.page.supporting-panel-label": "Supporting",
+	"components.page.supporting-divider-label": "فاصل اللوحة الداعمة",
+	"components.page.supporting-panel-label": "داعمة",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} مادة واحد}

package/lang/ca.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Tanca l’alerta",
 	"components.backdrop-loading.loadingAnnouncement": "Carregant.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Càrrega completa.",
+	"components.backdrop-stale-overlay.message": "This data is out of date.",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Afegeix element",
 	"components.button-copy.copied": "S’ha copiat!",
@@ -135,13 +136,13 @@ export default {
 	"components.list-item.addItem": "Afegeix element",
 	"components.list-item-drag-handle.default": "Acció de reordenar l’element per a {name}",
 	"components.list-item-drag-handle.keyboard": "Reordenar element, posició actual {currentPosition} de {size}. Per moure aquest element, premeu les fletxes amunt o avall.",
-	"components.list-item-drag-handle.side-to-side.keyboard": "Reorder item, current position {currentPosition} out of {size}. To move this item, press left or right arrows.",
+	"components.list-item-drag-handle.side-to-side.keyboard": "Torneu a ordenar l’element, posició actual {currentPosition} de {size}. Per moure aquest element, premeu les fletxes esquerra o dreta.",
 	"components.list-item-drag-handle-tooltip.enter-desc": "Canviar el mode de reordenació del teclat.",
 	"components.list-item-drag-handle-tooltip.enter-key": "Introduir",
 	"components.list-item-drag-handle-tooltip.left-right-desc": "Canviar el nivell d’anidament.",
 	"components.list-item-drag-handle-tooltip.left-right-key": "Esquerra/Dreta",
-	"components.list-item-drag-handle-tooltip.side-to-side.left-right-desc": "Move item left or right in the list.",
-	"components.list-item-drag-handle-tooltip.side-to-side.up-down-desc": "Move item left or right in the list.",
+	"components.list-item-drag-handle-tooltip.side-to-side.left-right-desc": "Passa l’element a l’esquerra o dreta de la llista.",
+	"components.list-item-drag-handle-tooltip.side-to-side.up-down-desc": "Passa l’element a l’esquerra o dreta de la llista.",
 	"components.list-item-drag-handle-tooltip.title": "Controls del teclat per reordenar:",
 	"components.list-item-drag-handle-tooltip.up-down-desc": "Mou l’element amunt o avall a la llista.",
 	"components.list-item-drag-handle-tooltip.up-down-key": "Amunt/Avall",
@@ -155,12 +156,12 @@ export default {
 	"components.more-less.more": "més",
 	"components.object-property-list.item-placeholder-text": "Element de marcador de posició",
 	"components.overflow-group.moreActions": "Més accions",
-	"components.page.footer-region-label": "Footer",
+	"components.page.footer-region-label": "Peu de pàgina",
 	"components.page.header-nav-label": "Principal",
-	"components.page.side-nav-divider-label": "Side Navigation Divider",
+	"components.page.side-nav-divider-label": "Separador de la navegació lateral",
 	"components.page.side-nav-label": "Lateral",
-	"components.page.supporting-divider-label": "Supporting Panel Divider",
-	"components.page.supporting-panel-label": "Supporting",
+	"components.page.supporting-divider-label": "Divisor del panell de suport",
+	"components.page.supporting-panel-label": "Suport",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} element}

package/lang/cy.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Cau Hysbysiad",
 	"components.backdrop-loading.loadingAnnouncement": "Wrthi’n llwytho.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Llwytho wedi Gorffen.",
+	"components.backdrop-stale-overlay.message": "This data is out of date.",
 	"components.breadcrumbs.breadcrumb": "Briwsionyn Bara",
 	"components.button-add.addItem": "Ychwanegu Eitem",
 	"components.button-copy.copied": "Wedi’i gopïo!",
@@ -135,13 +136,13 @@ export default {
 	"components.list-item.addItem": "Ychwanegu Eitem",
 	"components.list-item-drag-handle.default": "Aildrefnu gweithred eitem ar gyfer {name}",
 	"components.list-item-drag-handle.keyboard": "Aildrefnu eitemau, safle presennol {currentPosition} allan o {size}. I symud yr eitem hon, pwyswch y saeth i fyny neu’r saeth i lawr.",
-	"components.list-item-drag-handle.side-to-side.keyboard": "Reorder item, current position {currentPosition} out of {size}. To move this item, press left or right arrows.",
+	"components.list-item-drag-handle.side-to-side.keyboard": "Ail-drefnu eitem, safle cyfredol {currentPosition} o {size}. I symud yr eitem hon, pwyswch y saethau chwith neu dde.",
 	"components.list-item-drag-handle-tooltip.enter-desc": "Toglo’r modd aildrefnu bysellfwrdd.",
 	"components.list-item-drag-handle-tooltip.enter-key": "Nodi",
 	"components.list-item-drag-handle-tooltip.left-right-desc": "Newid y lefel nythu.",
 	"components.list-item-drag-handle-tooltip.left-right-key": "Chwith/De",
-	"components.list-item-drag-handle-tooltip.side-to-side.left-right-desc": "Move item left or right in the list.",
-	"components.list-item-drag-handle-tooltip.side-to-side.up-down-desc": "Move item left or right in the list.",
+	"components.list-item-drag-handle-tooltip.side-to-side.left-right-desc": "Symud eitem i’r chwith neu dde yn y rhestr.",
+	"components.list-item-drag-handle-tooltip.side-to-side.up-down-desc": "Symud eitem i’r chwith neu dde yn y rhestr.",
 	"components.list-item-drag-handle-tooltip.title": "Rheolaethau bysellfwrdd ar gyfer aildrefnu:",
 	"components.list-item-drag-handle-tooltip.up-down-desc": "Symud yr eitem i fyny neu i lawr yn y rhestr.",
 	"components.list-item-drag-handle-tooltip.up-down-key": "I Fyny/I Lawr",
@@ -155,12 +156,12 @@ export default {
 	"components.more-less.more": "mwy",
 	"components.object-property-list.item-placeholder-text": "Eitem Dalfan",
 	"components.overflow-group.moreActions": "Rhagor o Gamau Gweithredu",
-	"components.page.footer-region-label": "Footer",
+	"components.page.footer-region-label": "Troedyn",
 	"components.page.header-nav-label": "Prif",
-	"components.page.side-nav-divider-label": "Side Navigation Divider",
+	"components.page.side-nav-divider-label": "Raniwr Llywio Ochr",
 	"components.page.side-nav-label": "Ochr",
-	"components.page.supporting-divider-label": "Supporting Panel Divider",
-	"components.page.supporting-panel-label": "Supporting",
+	"components.page.supporting-divider-label": "Raniwr Panel Cymorth",
+	"components.page.supporting-panel-label": "Cefnogi",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} eitem}