@brightspace-ui/core 3.237.4 → 3.237.6

package/components/link/link-styles.js

@@ -23,13 +23,13 @@ export const _generateLinkStyles = (selector, includeSkeleton = true) => {
 	return css`
 		${selectorCSS}, ${selectorCSS}:visited, ${selectorCSS}:active, ${selectorCSS}:link {
 			--d2l-focus-ring-offset: 1px;
-			color: var(--d2l-color-celestine);
+			color: var(--d2l-theme-text-color-interactive-default);
 			cursor: pointer;
 			outline-style: none;
 			text-decoration: none;
 		}
 		${selectorCSS}:hover {
-			color: var(--d2l-color-celestine-minus-1);
+			color: var(--d2l-theme-text-color-interactive-hover);
 			text-decoration: underline;
 		}
 		${getFocusRingStyles(selector, { extraStyles: css`border-radius: 2px; text-decoration: underline;` })}
@@ -43,7 +43,7 @@ export const _generateLinkStyles = (selector, includeSkeleton = true) => {
 		}
 		@media print {
 			${selectorCSS}, ${selectorCSS}:visited, ${selectorCSS}:active, ${selectorCSS}:link {
-				color: var(--d2l-color-ferrite);
+				color: var(--d2l-theme-text-color-static-standard);
 			}
 		}
 		${skeletonStyles}

package/components/link/link.js

@@ -105,7 +105,7 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 					white-space: nowrap;
 				}
 				d2l-icon {
-					color: var(--d2l-color-celestine);
+					color: var(--d2l-theme-text-color-interactive-default);
 					height: calc(1em - 1px);
 					margin-inline-start: 0.315em;
 					transform: translateY(0.1em);
@@ -114,25 +114,25 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 				}
 
 				a:hover d2l-icon {
-					--d2l-icon-fill-color: var(--d2l-color-celestine-minus-1);
+					--d2l-icon-fill-color: var(--d2l-theme-text-color-interactive-hover);
 				}
 
 				:host([disabled]:not([disabled-tooltip])) a:hover {
-					color: var(--d2l-color-celestine);
+					color: var(--d2l-theme-text-color-interactive-default);
 					text-decoration: none;
 				}
 				:host([disabled]:not([disabled-tooltip])) a:hover d2l-icon {
-					--d2l-icon-fill-color: var(--d2l-color-celestine);
+					--d2l-icon-fill-color: var(--d2l-theme-text-color-interactive-default);
 				}
 				a[aria-disabled="true"],
 				a[aria-disabled="true"]:active {
 					cursor: default;
 				}
 				a[aria-disabled="true"] .d2l-link-content {
-					opacity: 0.74;
+					opacity: var(--d2l-theme-opacity-disabled-link);
 				}
 				a[aria-disabled="true"] d2l-icon {
-					opacity: 0.64;
+					opacity: var(--d2l-theme-opacity-disabled-linkicon);
 				}
 
 				@media print {

package/components/table/table-wrapper.js

@@ -10,6 +10,8 @@ import { isPopoverSupported } from '../popover/popover-mixin.js';
 import { PageableMixin } from '../paging/pageable-mixin.js';
 import { SelectionMixin } from '../selection/selection-mixin.js';
 
+const enableStickyScrollyFix = getFlag('table-sticky-scrolly-fix', true);
+
 export const tableStyles = css`
 	.d2l-table {
 		border-collapse: separate; /* needed to override reset stylesheets */
@@ -447,6 +449,10 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 		}
 	}
 
+	#hasIntersected = false;
+
+	#noScrollWidthTimeout = null;
+
 	_applyClassNames() {
 		if (!this._table) return;
 
@@ -581,6 +587,7 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 				this._tableIntersectionObserver = new IntersectionObserver((entries) => {
 					entries.forEach((entry) => {
 						if (entry.isIntersecting) {
+							this.#hasIntersected = true;
 							this._handleTableChange();
 						}
 					});
@@ -647,11 +654,20 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 		const head = this._table.querySelector('thead');
 		const body = this._table.querySelector('tbody');
 
-		const maxScrollWidth = Math.max(head?.scrollWidth, body?.scrollWidth);
-		setTimeout(() => {
-			this._noScrollWidth = this.clientWidth === maxScrollWidth;
-		});
-		if (!head || !body || !this._table || !this.stickyHeaders || !this.stickyHeadersScrollWrapper || this._noScrollWidth) return;
+		if (enableStickyScrollyFix) {
+			clearTimeout(this.#noScrollWidthTimeout);
+			this.#noScrollWidthTimeout = setTimeout(() => {
+				const maxScrollWidth = Math.max(head?.scrollWidth, body?.scrollWidth);
+				this._noScrollWidth = (maxScrollWidth <= this.clientWidth);
+			});
+			if (!head || !body || !this.stickyHeaders || !this.stickyHeadersScrollWrapper || this._noScrollWidth || !this.#hasIntersected) return;
+		} else {
+			const maxScrollWidth = Math.max(head?.scrollWidth, body?.scrollWidth);
+			setTimeout(() => {
+				this._noScrollWidth = this.clientWidth === maxScrollWidth;
+			});
+			if (!head || !body || !this._table || !this.stickyHeaders || !this.stickyHeadersScrollWrapper || this._noScrollWidth) return;
+		}
 
 		const candidateRowHeadCells = [];
 

package/package.json

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