+
I'm in the default slot of the d2l-page component!
${this.demoMode ? html`
@@ -165,24 +182,311 @@ class PageDemo extends LitElement {
` : nothing}
-
I'm in the default slot of the d2l-page component!
+
+
List with Sticky Controls (extend-separators)
+
+
+
+
+
+
+
+ Introduction to Economics
+ Chapter 1 — Fundamentals
+ Due: May 15, 2026
+
+
+
+
+ Supply and Demand
+ Chapter 2 — Market Forces
+ Due: May 22, 2026
+
+
+
+
+ Market Equilibrium
+ Chapter 3 — Price Discovery
+ Due: May 29, 2026
+
+
+
+
+
List with Sticky Controls (no extend-separators)
+
+
+
+
+
+
+
+ Assignment 1: Research Proposal
+ Weight: 20%
+ Submissions: 14/30
+
+
+
+
+ Assignment 2: Literature Review
+ Weight: 30%
+ Submissions: 8/30
+
+
+
+
+ Assignment 3: Final Paper
+ Weight: 50%
+ Submissions: 0/30
+
+
+
+
+
Table with Sticky Controls
+
+
+
+
+
+
+
+
+ | Course |
+ Enrolled |
+ Completion Rate |
+ Avg Grade |
+
+
+
+
+ | Introduction to Biology |
+ 145 |
+ 87% |
+ B+ |
+
+
+ | Advanced Chemistry |
+ 62 |
+ 79% |
+ B |
+
+
+ | World History |
+ 98 |
+ 92% |
+ A- |
+
+
+
+
+
+
Sticky Table
+
+
+
+
+ | Student |
+ Assignment 1 |
+ Assignment 2 |
+ Final Exam |
+ Total |
+
+
+
+
+ | Alice Johnson |
+ 92 |
+ 88 |
+ 95 |
+ 91.7 |
+
+
+ | Bob Smith |
+ 85 |
+ 79 |
+ 82 |
+ 82.0 |
+
+
+ | Carol Davis |
+ 78 |
+ 91 |
+ 87 |
+ 85.3 |
+
+
+ | David Lee |
+ 95 |
+ 93 |
+ 90 |
+ 92.7 |
+
+
+ | Emily Chen |
+ 88 |
+ 84 |
+ 91 |
+ 87.7 |
+
+
+
+
`;
}
#renderSideNavPanel() {
return this.hasSideNavPanel ? html`
-
- I'm in the
side-nav slot of the
d2l-page component!
+
+
I'm in the side-nav slot of the d2l-page component!
+
+
+
+ Course Overview
+
+
+
+
+ Unit 1: Foundations
+ 3 items
+
+
+
+
+ Reading: Core Concepts
+
+
+
+
+ Discussion: Key Takeaways
+
+
+
+
+ Quiz: Chapter 1
+
+
+
+
+
+
+ Unit 2: Applications
+ 4 items
+
+
+
+
+ Case Study Analysis
+
+
+
+
+ Group Project
+
+
+
+
+ Lab: Data Collection
+
+
+
+
+ Reflection Journal
+
+
+
+
+
+
+ Unit 3: Research Methods
+ 5 items
+
+
+
+
+ Introduction to Research Design
+
+
+
+
+ Qualitative vs Quantitative
+
+
+
+
+ Survey Design Workshop
+
+
+
+
+ Ethics in Research
+
+
+
+
+ Quiz: Research Methods
+
+
+
+
+
+
End of Content
` : nothing;
}
#renderSupportingPanel() {
return this.hasSupportingPanel ? html`
-
- I'm in the
supporting slot of the
d2l-page component!
+
+
+
I'm in the supporting slot of the d2l-page component!
+
+
+
+
+
+
+ Has start date
+ Has end date
+
+
+
+
+
+
+
+
+
+
+ Include in final grade calculation
+
+
+
+
+
+
+
+
+ Allow learners to retract submissions
+ Notify instructor on submission
+
+
+
+
+
+
End of Content
` : nothing;
}
From 2c5444ade09e6c9f619932af081f02342c0bd0bb Mon Sep 17 00:00:00 2001
From: Stacey Van Herk <13419300+svanherk@users.noreply.github.com>
Date: Mon, 4 May 2026 18:20:56 -0400
Subject: [PATCH 5/6] Add dialog demonstrating stacking context issue, since
dialogs don't use popover
---
components/page/demo/page-component.js | 33 ++++++++++++++++++++++++++
1 file changed, 33 insertions(+)
diff --git a/components/page/demo/page-component.js b/components/page/demo/page-component.js
index 54c0633c761..468ebe83e2c 100644
--- a/components/page/demo/page-component.js
+++ b/components/page/demo/page-component.js
@@ -1,8 +1,10 @@
+import '../../button/button.js';
import '../../button/button-subtle.js';
import '../../collapsible-panel/collapsible-panel.js';
import '../../collapsible-panel/collapsible-panel-group.js';
import '../../collapsible-panel/collapsible-panel-summary-item.js';
import '../../demo/demo-page-settings.js';
+import '../../dialog/dialog.js';
import '../../inputs/input-checkbox.js';
import '../../inputs/input-date.js';
import '../../inputs/input-number.js';
@@ -75,6 +77,15 @@ class PageDemo extends LitElement {
}
}
+ // TO DO: Don't commit this! Fix the dialog and add this in the main header
+ #handleDialogBrokenClick() {
+ this.shadowRoot.querySelector('#broken-dialog').opened = true;
+ }
+
+ #handleDialogNativeClick() {
+ this.shadowRoot.querySelector('#native-dialog').opened = true;
+ }
+
#handleNavTypeChange(e) {
this.navType = e.target.on ? 'immersive' : 'full';
}
@@ -186,6 +197,8 @@ class PageDemo extends LitElement {
List with Sticky Controls (extend-separators)
+
+
@@ -330,6 +343,26 @@ class PageDemo extends LitElement {
+
+
+
+
+
+ Allow late submissions
+
+ Add
+ Cancel
+
+
+
+
+
+
+ Allow late submissions
+
+ Add
+ Cancel
+
End of Content
`;
From 82e9355bccc0fd045f47f2c30f967f83a324b2e0 Mon Sep 17 00:00:00 2001
From: Stacey Van Herk <13419300+svanherk@users.noreply.github.com>
Date: Mon, 4 May 2026 19:09:00 -0400
Subject: [PATCH 6/6] GAUD-9165 - Example of how we could apply fix to our
sticky components
---
components/collapsible-panel/collapsible-panel.js | 10 ++++++----
components/page/page.js | 3 +++
components/selection/selection-controls.js | 2 +-
components/table/table-wrapper.js | 6 +++---
4 files changed, 13 insertions(+), 8 deletions(-)
diff --git a/components/collapsible-panel/collapsible-panel.js b/components/collapsible-panel/collapsible-panel.js
index 8ace4071b6d..043c1ba26fc 100644
--- a/components/collapsible-panel/collapsible-panel.js
+++ b/components/collapsible-panel/collapsible-panel.js
@@ -173,15 +173,17 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(LitElement)) {
border-radius: 0;
outline-offset: -2px;
}
- .d2l-collapsible-panel.scrolled .d2l-collapsible-panel-header {
+ .d2l-collapsible-panel .d2l-collapsible-panel-header {
background-color: var(--d2l-theme-background-color-base);
- box-shadow: 0 8px 12px -9px rgba(0, 0, 0, 0.3);
position: sticky;
- top: 0;
+ top: var(--d2l-sticky-offset, 0px);
z-index: 11; /* must be greater greater than list-items with open dropdowns or tooltips */
}
+ .d2l-collapsible-panel.scrolled .d2l-collapsible-panel-header {
+ box-shadow: 0 8px 12px -9px rgba(0, 0, 0, 0.3);
+ }
.d2l-collapsible-panel.focused.scrolled .d2l-collapsible-panel-header {
- top: 2px;
+ top: calc(var(--d2l-sticky-offset, 0px) + 2px);
}
.d2l-collapsible-panel-title {
flex: 1;
diff --git a/components/page/page.js b/components/page/page.js
index 85618b4b849..ee9fb5da102 100644
--- a/components/page/page.js
+++ b/components/page/page.js
@@ -66,6 +66,9 @@ class Page extends LocalizeCoreElement(LitElement) {
position: relative;
z-index: 0;
}
+ .page.header-sticky main {
+ --d2l-sticky-offset: var(--d2l-page-header-height, 0px);
+ }
.side-nav-panel,
.supporting-panel {
diff --git a/components/selection/selection-controls.js b/components/selection/selection-controls.js
index d164e68ea46..c10344e3c6e 100644
--- a/components/selection/selection-controls.js
+++ b/components/selection/selection-controls.js
@@ -50,7 +50,7 @@ export class SelectionControls extends PageableSubscriberMixin(SelectionObserver
:host {
display: block;
position: sticky;
- top: 0;
+ top: var(--d2l-sticky-offset, 0px);
}
:host([no-sticky]) {
position: static;
diff --git a/components/table/table-wrapper.js b/components/table/table-wrapper.js
index 780249f5348..b59c1ab2c36 100644
--- a/components/table/table-wrapper.js
+++ b/components/table/table-wrapper.js
@@ -241,7 +241,7 @@ export const tableStyles = css`
d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper] .d2l-table > thead {
display: block;
position: sticky;
- top: calc(var(--d2l-table-sticky-top, 0px) + var(--d2l-table-border-radius-sticky-offset, 0px));
+ top: calc(var(--d2l-sticky-offset, 0px) + var(--d2l-table-sticky-top, 0px) + var(--d2l-table-border-radius-sticky-offset, 0px));
z-index: 2;
}
@@ -382,7 +382,7 @@ export class TableWrapper extends PropertyRequiredMixin(PageableMixin(SelectionM
}
.d2l-sticky-headers-backdrop {
position: sticky;
- top: calc(var(--d2l-table-sticky-top, 0px) + var(--d2l-table-border-radius));
+ top: calc(var(--d2l-sticky-offset, 0px) + var(--d2l-table-sticky-top, 0px) + var(--d2l-table-border-radius));
width: 100%;
z-index: 2; /* Must sit under d2l-table sticky-headers but over sticky columns and regular cells */
}
@@ -832,7 +832,7 @@ export class TableWrapper extends PropertyRequiredMixin(PageableMixin(SelectionM
const stickyRows = Array.from(this._table.querySelectorAll(SELECTORS.headers));
stickyRows.forEach(r => {
- const thTop = hasStickyControls ? `${rowTop}px` : `calc(${rowTop}px + var(--d2l-table-border-radius-sticky-offset, 0px))`;
+ const thTop = hasStickyControls ? `calc(var(--d2l-sticky-offset, 0px) + ${rowTop}px)` : `calc(var(--d2l-sticky-offset, 0px) + ${rowTop}px + var(--d2l-table-border-radius-sticky-offset, 0px))`;
const ths = Array.from(r.querySelectorAll('th,td'));
ths.forEach(th => th.style.top = thTop);