@brightspace-ui/core 3.219.6 → 3.219.8

package/helpers/demo/prism.html

@@ -325,1790 +325,6 @@ border: 1px solid #cd2026;
 			</tbody>
 		</table>
 
-		<h2 class="d2l-heading-3">Large Samples</h2>
-
-<pre class="d2l-code d2l-code-dark line-numbers"><code class="language-markup">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-	&lt;head&gt;
-		&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
-		&lt;meta charset="UTF-8"&gt;
-		&lt;link rel="stylesheet" href="../../demo/styles.css" type="text/css"&gt;
-		&lt;script type="module"&gt;
-			import '../../demo/demo-page.js';
-			import '../../button/button.js';
-			import '../../button/button-icon.js';
-			import '../../dropdown/dropdown-more.js';
-			import '../../dropdown/dropdown-content.js';
-			import '../../status-indicator/status-indicator.js';
-			import '../../tooltip/tooltip.js';
-			import '../card.js';
-			import '../card-loading-shimmer.js';
-			import '../card-content-meta.js';
-			import '../card-content-title.js';
-			import '../card-footer-link.js';
-		&lt;/script&gt;
-		&lt;style&gt;
-			d2l-card {
-				vertical-align: top;
-			}
-			.subtle-demo {
-				background-color: #f6f7f8;
-				padding: 20px;
-			}
-			.badge {
-				text-align: center;
-			}
-			.badge &gt; img {
-				background-color: white;
-				border: 1px solid #202122; /* ferrite */
-				border-radius: 6px;
-				height: 70px;
-				object-fit: cover;
-				object-position: center;
-			}
-			.badge-status {
-				background-color: white;
-				border: 1px solid white;
-				border-radius: 0.6rem;
-				display: inline-block;
-			}
-			div[slot="footer"] {
-				display: inline-block;
-			}
-			#toggleLoading {
-				margin-top: 20px;
-			}
-		&lt;/style&gt;
-	&lt;/head&gt;
-	&lt;body unresolved&gt;
-
-		&lt;d2l-demo-page page-title="d2l-card"&gt;
-
-			&lt;h2&gt;Subtle Card (badges, no-link)&lt;/h2&gt;
-
-			&lt;d2l-demo-snippet&gt;
-				&lt;template&gt;
-					&lt;div class="subtle-demo"&gt;
-
-						&lt;d2l-card subtle align-center text="Image Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 280px; width: 245px;"&gt;
-							&lt;img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"&gt;
-							&lt;div slot="badge" class="badge"&gt;
-								&lt;img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Stick_Figure.svg/340px-Stick_Figure.svg.png"&gt;
-							&lt;/div&gt;
-							&lt;div slot="content"&gt;Image Badge&lt;/div&gt;
-						&lt;/d2l-card&gt;
-
-						&lt;d2l-card subtle align-center text="Status Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 280px; width: 245px;"&gt;
-							&lt;img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"&gt;
-							&lt;div class="badge-status" slot="badge"&gt;
-								&lt;d2l-status-indicator text="Success" state="success"&gt;&lt;/d2l-status-indicator&gt;
-							&lt;/div&gt;
-							&lt;div slot="content"&gt;Status Badge&lt;/div&gt;
-						&lt;/d2l-card&gt;
-
-						&lt;d2l-card subtle align-center text="No Link" style="height: 280px; width: 245px;"&gt;
-							&lt;img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"&gt;
-							&lt;div slot="content"&gt;No Link&lt;/div&gt;
-						&lt;/d2l-card&gt;
-
-					&lt;/div&gt;
-				&lt;/template&gt;
-			&lt;/d2l-demo-snippet&gt;
-
-			&lt;h2&gt;Subtle Card (header actions, meta-content, footer links)&lt;/h2&gt;
-
-			&lt;d2l-demo-snippet&gt;
-				&lt;template&gt;
-					&lt;div class="subtle-demo"&gt;
-
-						&lt;d2l-card subtle align-center text="Hydrology" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 300px; width: 245px;"&gt;
-							&lt;img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"&gt;
-							&lt;d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!"&gt;
-									&lt;d2l-dropdown-content&gt;
-										&lt;div&gt;This is where you could put the super cool features for your card!&lt;/div&gt;&lt;br&gt;&lt;div&gt;As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.&lt;/div&gt;
-										&lt;div&gt;This is where you could put the super cool features for your card!&lt;/div&gt;&lt;br&gt;&lt;div&gt;As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.&lt;/div&gt;
-										&lt;div&gt;This is where you could put the super cool features for your card!&lt;/div&gt;&lt;br&gt;&lt;div&gt;As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.&lt;/div&gt;
-									&lt;/d2l-dropdown-content&gt;
-							&lt;/d2l-dropdown-more&gt;
-							&lt;d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"&gt;&lt;/d2l-button-icon&gt;
-							&lt;div slot="content"&gt;&lt;div&gt;Hydrology&lt;/div&gt;&lt;d2l-card-content-meta&gt;This is some extra meta data that will fill the content slot of the card.&lt;/d2l-card-content-meta&gt;&lt;/div&gt;
-							&lt;div slot="footer"&gt;
-								&lt;d2l-card-footer-link id="googleDriveLink1" icon="tier1:google-drive" text="Google Drive" secondary-count="100" href="https://www.google.ca/drive/"&gt;
-									&lt;d2l-tooltip slot="tooltip" for="googleDriveLink1"&gt;Go to Google Drive&lt;/d2l-tooltip&gt;
-								&lt;/d2l-card-footer-link&gt;
-								&lt;d2l-card-footer-link id="rssFeedLink1" icon="tier1:rss" text="RSS Feed" secondary-count="1"&gt;
-									&lt;d2l-tooltip slot="tooltip" for="rssFeedLink1"&gt;RSS Feed&lt;/d2l-tooltip&gt;
-								&lt;/d2l-card-footer-link&gt;
-								&lt;d2l-card-footer-link id="outcomesLink1" icon="tier1:outcomes" text="Outcomes" secondary-count="5"&gt;
-									&lt;d2l-tooltip slot="tooltip" for="outcomesLink1"&gt;Outcomes&lt;/d2l-tooltip&gt;
-								&lt;/d2l-card-footer-link&gt;
-								&lt;d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-count="3"&gt;
-									&lt;d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink1"&gt;You have 3 assignments due tomorrow.&lt;/d2l-tooltip&gt;
-								&lt;/d2l-card-footer-link&gt;
-							&lt;/div&gt;
-						&lt;/d2l-card&gt;
-
-						&lt;d2l-card subtle align-center text="Grade 2" href="https://en.wikipedia.org/wiki/Second_grade" style="height: 300px; width: 245px;"&gt;
-							&lt;img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-low-density-max-size.jpg"&gt;
-							&lt;d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!"&gt;
-									&lt;d2l-dropdown-content&gt;&lt;div&gt;This is where you could put the super cool features for your card!&lt;/div&gt;&lt;br&gt;&lt;div&gt;As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.&lt;/div&gt;&lt;/d2l-dropdown-content&gt;
-							&lt;/d2l-dropdown-more&gt;
-							&lt;d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"&gt;&lt;/d2l-button-icon&gt;
-							&lt;div slot="content"&gt;Grade 2&lt;/div&gt;
-							&lt;div slot="footer"&gt;
-								&lt;d2l-card-footer-link id="googleDriveLink2" icon="tier1:google-drive" text="Google Drive" secondary-count="100" href="https://www.google.ca/drive/"&gt;
-									&lt;d2l-tooltip slot="tooltip" for="googleDriveLink2"&gt;Go to Google Drive&lt;/d2l-tooltip&gt;
-								&lt;/d2l-card-footer-link&gt;
-								&lt;d2l-card-footer-link id="rssFeedLink2" icon="tier1:rss" text="RSS Feed" secondary-count="1"&gt;
-									&lt;d2l-tooltip slot="tooltip" for="rssFeedLink2"&gt;RSS Feed&lt;/d2l-tooltip&gt;
-								&lt;/d2l-card-footer-link&gt;
-								&lt;d2l-card-footer-link id="outcomesLink2" icon="tier1:outcomes" text="Outcomes" secondary-count="5"&gt;
-									&lt;d2l-tooltip slot="tooltip" for="outcomesLink2"&gt;Outcomes&lt;/d2l-tooltip&gt;
-								&lt;/d2l-card-footer-link&gt;
-							&lt;/div&gt;
-						&lt;/d2l-card&gt;
-
-						&lt;d2l-card subtle align-center text="Painting" href="https://en.wikipedia.org/wiki/Painting" style="height: 300px; width: 245px;"&gt;
-							&lt;img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-low-density-max-size.jpg"&gt;
-							&lt;d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!"&gt;
-									&lt;d2l-dropdown-content&gt;&lt;div&gt;This is where you could put the super cool features for your card!&lt;/div&gt;&lt;br&gt;&lt;div&gt;As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.&lt;/div&gt;&lt;/d2l-dropdown-content&gt;
-							&lt;/d2l-dropdown-more&gt;
-							&lt;d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"&gt;&lt;/d2l-button-icon&gt;
-							&lt;div slot="content"&gt;Painting&lt;/div&gt;
-							&lt;d2l-button slot="footer" style="width: 100%;"&gt;Shiny Button&lt;/d2l-button&gt;
-						&lt;/d2l-card&gt;
-
-					&lt;/div&gt;
-				&lt;/template&gt;
-			&lt;/d2l-demo-snippet&gt;
-
-			&lt;h2&gt;Card (badges, no-link)&lt;/h2&gt;
-
-			&lt;d2l-demo-snippet&gt;
-				&lt;template&gt;
-
-					&lt;d2l-card align-center text="Image Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 280px; width: 245px;"&gt;
-						&lt;img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"&gt;
-						&lt;div slot="badge" class="badge"&gt;
-							&lt;img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Stick_Figure.svg/340px-Stick_Figure.svg.png"&gt;
-						&lt;/div&gt;
-						&lt;div slot="content"&gt;Image Badge&lt;/div&gt;
-					&lt;/d2l-card&gt;
-
-					&lt;d2l-card align-center text="Status Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 280px; width: 245px;"&gt;
-						&lt;img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"&gt;
-						&lt;div class="badge-status" slot="badge"&gt;
-							&lt;d2l-status-indicator text="Success" state="success"&gt;&lt;/d2l-status-indicator&gt;
-						&lt;/div&gt;
-						&lt;div slot="content"&gt;Status Badge&lt;/div&gt;
-					&lt;/d2l-card&gt;
-
-					&lt;d2l-card align-center text="No Link" style="height: 280px; width: 245px;"&gt;
-						&lt;img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"&gt;
-						&lt;div slot="content"&gt;No Link&lt;/div&gt;
-					&lt;/d2l-card&gt;
-
-				&lt;/template&gt;
-			&lt;/d2l-demo-snippet&gt;
-
-			&lt;h2&gt;Card (header actions, meta-content, footer links)&lt;/h2&gt;
-
-			&lt;d2l-demo-snippet&gt;
-				&lt;template&gt;
-
-					&lt;d2l-card align-center text="Hydrology" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 300px; width: 245px;"&gt;
-						&lt;img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"&gt;
-						&lt;d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!"&gt;
-								&lt;d2l-dropdown-content&gt;
-									&lt;div&gt;This is where you could put the super cool features for your card!&lt;/div&gt;&lt;br&gt;&lt;div&gt;As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.&lt;/div&gt;
-									&lt;div&gt;This is where you could put the super cool features for your card!&lt;/div&gt;&lt;br&gt;&lt;div&gt;As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.&lt;/div&gt;
-									&lt;div&gt;This is where you could put the super cool features for your card!&lt;/div&gt;&lt;br&gt;&lt;div&gt;As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.&lt;/div&gt;
-								&lt;/d2l-dropdown-content&gt;
-						&lt;/d2l-dropdown-more&gt;
-						&lt;d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"&gt;&lt;/d2l-button-icon&gt;
-						&lt;div slot="content"&gt;&lt;div&gt;Hydrology&lt;/div&gt;&lt;d2l-card-content-meta&gt;This is some extra meta data that will fill the content slot of the card.&lt;/d2l-card-content-meta&gt;&lt;/div&gt;
-						&lt;div slot="footer"&gt;
-							&lt;d2l-card-footer-link id="googleDriveLink3" icon="tier1:google-drive" text="Google Drive" secondary-count="100" href="https://www.google.ca/drive/"&gt;
-								&lt;d2l-tooltip slot="tooltip" for="googleDriveLink3"&gt;Go to Google Drive&lt;/d2l-tooltip&gt;
-							&lt;/d2l-card-footer-link&gt;
-							&lt;d2l-card-footer-link id="rssFeedLink3" icon="tier1:rss" text="RSS Feed" secondary-count="1"&gt;
-								&lt;d2l-tooltip slot="tooltip" for="rssFeedLink3"&gt;RSS Feed&lt;/d2l-tooltip&gt;
-							&lt;/d2l-card-footer-link&gt;
-							&lt;d2l-card-footer-link id="outcomesLink3" icon="tier1:outcomes" text="Outcomes" secondary-count="5"&gt;
-								&lt;d2l-tooltip slot="tooltip" for="outcomesLink3"&gt;Outcomes&lt;/d2l-tooltip&gt;
-							&lt;/d2l-card-footer-link&gt;
-							&lt;d2l-card-footer-link id="assignmentsLink3" icon="tier1:assignments" text="Assignments" secondary-count="3"&gt;
-								&lt;d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink3"&gt;You have 3 assignments due tomorrow.&lt;/d2l-tooltip&gt;
-							&lt;/d2l-card-footer-link&gt;
-						&lt;/div&gt;
-					&lt;/d2l-card&gt;
-
-					&lt;d2l-card align-center text="Painting" href="https://en.wikipedia.org/wiki/Painting" style="height: 300px; width: 245px;"&gt;
-						&lt;img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-low-density-max-size.jpg"&gt;
-						&lt;d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!"&gt;
-								&lt;d2l-dropdown-content&gt;&lt;div&gt;This is where you could put the super cool features for your card!&lt;/div&gt;&lt;br&gt;&lt;div&gt;As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.&lt;/div&gt;&lt;/d2l-dropdown-content&gt;
-						&lt;/d2l-dropdown-more&gt;
-						&lt;d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"&gt;&lt;/d2l-button-icon&gt;
-						&lt;div slot="content"&gt;Painting&lt;/div&gt;
-						&lt;d2l-button slot="footer" style="width: 100%;"&gt;Shiny Button&lt;/d2l-button&gt;
-					&lt;/d2l-card&gt;
-
-					&lt;d2l-card align-center text="Grade 2" href="https://en.wikipedia.org/wiki/Second_grade" style="height: 300px; width: 245px;"&gt;
-						&lt;img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-low-density-max-size.jpg"&gt;
-						&lt;d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!"&gt;
-								&lt;d2l-dropdown-content&gt;&lt;div&gt;This is where you could put the super cool features for your card!&lt;/div&gt;&lt;br&gt;&lt;div&gt;As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.&lt;/div&gt;&lt;/d2l-dropdown-content&gt;
-						&lt;/d2l-dropdown-more&gt;
-						&lt;d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"&gt;&lt;/d2l-button-icon&gt;
-						&lt;div slot="content"&gt;Grade 2&lt;/div&gt;
-						&lt;div slot="footer"&gt;
-							&lt;d2l-card-footer-link id="googleDriveLink4" icon="tier1:google-drive" text="Google Drive" secondary-count-type="count" secondary-count="100" href="https://www.google.ca/drive/"&gt;
-								&lt;d2l-tooltip slot="tooltip" for="googleDriveLink4"&gt;Go to Google Drive&lt;/d2l-tooltip&gt;
-							&lt;/d2l-card-footer-link&gt;
-							&lt;d2l-card-footer-link id="rssFeedLink4" icon="tier1:rss" text="RSS Feed" secondary-count-type="count" secondary-count="1"&gt;
-								&lt;d2l-tooltip slot="tooltip" for="rssFeedLink4"&gt;RSS Feed&lt;/d2l-tooltip&gt;
-							&lt;/d2l-card-footer-link&gt;
-							&lt;d2l-card-footer-link id="outcomesLink4" icon="tier1:outcomes" text="Outcomes" secondary-count-type="count" secondary-count="5"&gt;
-								&lt;d2l-tooltip slot="tooltip" for="outcomesLink4"&gt;Outcomes&lt;/d2l-tooltip&gt;
-							&lt;/d2l-card-footer-link&gt;
-						&lt;/div&gt;
-					&lt;/d2l-card&gt;
-
-				&lt;/template&gt;
-			&lt;/d2l-demo-snippet&gt;
-
-			&lt;h2&gt;Card (with header loading)&lt;/h2&gt;
-
-			&lt;d2l-demo-snippet&gt;
-				&lt;template&gt;
-
-					&lt;d2l-card align-center text="Hydrology" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 300px; width: 245px;"&gt;
-						&lt;d2l-card-loading-shimmer slot="header" loading style="display: block; height: 103.5px; width: 100%;"&gt;
-							&lt;img  alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"&gt;
-						&lt;/d2l-card-loading-shimmer&gt;
-						&lt;div slot="content"&gt;&lt;div&gt;Hydrology&lt;/div&gt;&lt;d2l-card-content-meta&gt;This is some extra meta data that will fill the content slot of the card.&lt;/d2l-card-content-meta&gt;&lt;/div&gt;
-					&lt;/d2l-card&gt;
-
-					&lt;div&gt;
-						&lt;d2l-button id="toggleLoading"&gt;Toggle Loading State&lt;/d2l-button&gt;
-					&lt;/div&gt;
-
-					&lt;script&gt;
-						document.querySelector('#toggleLoading').addEventListener('click', () =&gt; {
-							const loadingContainer = document.querySelector('d2l-card-loading-shimmer');
-							loadingContainer.loading = !loadingContainer.loading;
-						});
-					&lt;/script&gt;
-				&lt;/template&gt;
-			&lt;/d2l-demo-snippet&gt;
-
-		&lt;/d2l-demo-page&gt;
-	&lt;/body&gt;
-&lt;/html&gt;
-</code></pre>
-
-<pre class="d2l-code d2l-code-dark line-numbers"><code class="language-javascript">import '../backdrop/backdrop.js';
-import '../button/button.js';
-import '../focus-trap/focus-trap.js';
-import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
-import { findComposedAncestor, getBoundingAncestor, isComposedAncestor, isVisible } from '../../helpers/dom.js';
-import { getComposedActiveElement, getFirstFocusableDescendant, getPreviousFocusableAncestor } from '../../helpers/focus.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { html } from 'lit';
-import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
-
-const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
-const minBackdropHeightMobile = 42;
-const minBackdropWidthMobile = 30;
-const outerMarginTopBottom = 18;
-const defaultVerticalOffset = 16;
-
-export const DropdownContentMixin = superclass =&gt; class extends LocalizeCoreElement(superclass) {
-
-	static get properties() {
-		return {
-			/**
-			 * Optionally align dropdown to either start or end. If not set, the dropdown will attempt be centred.
-			 * @type {'start'|'end'}
-			 */
-			align: {
-				type: String,
-				reflect: true
-			},
-			/**
-			 * Optionally provide boundaries to where the dropdown will appear. Valid properties are "above", "below", "left", and "right".
-			 * @type {object}
-			 */
-			boundary: {
-				type: Object,
-			},
-			/**
-			 * Override default max-width (undefined). Specify a number that would be the px value.
-			 * @type {number}
-			 */
-			maxWidth: {
-				type: Number,
-				reflect: true,
-				attribute: 'max-width'
-			},
-			/**
-			 * Override default min-width (undefined). Specify a number that would be the px value.
-			 * @type {number}
-			 */
-			minWidth: {
-				type: Number,
-				reflect: true,
-				attribute: 'min-width'
-			},
-			/**
-			 * Override max-height. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.
-			 * @type {number}
-			 */
-			maxHeight: {
-				type: Number,
-				attribute: 'max-height'
-			},
-			/**
-			 * Override the breakpoint at which mobile styling is used. Defaults to 616px.
-			 * @type {number}
-			 */
-			mobileBreakpointOverride: {
-				type: Number,
-				attribute: 'mobile-breakpoint'
-			},
-			/**
-			 * Override default height used for required space when `no-auto-fit` is true. Specify a number that would be the px value. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.
-			 * @type {number}
-			 */
-			minHeight: {
-				type: Number,
-				reflect: true,
-				attribute: 'min-height'
-			},
-			/**
-			 * Opt-out of showing a close button in the footer of tray-style mobile dropdowns.
-			 * @type {boolean}
-			 */
-			noMobileCloseButton: {
-				type: Boolean,
-				reflect: true,
-				attribute: 'no-mobile-close-button'
-			},
-			/**
-			 * Mobile dropdown style.
-			 * @type {'left'|'right'|'bottom'}
-			 */
-			mobileTray: {
-				type: String,
-				reflect: true,
-				attribute: 'mobile-tray'
-			},
-			/**
-			 * Opt out of automatically closing on focus or click outside of the dropdown content
-			 * @type {boolean}
-			 */
-			noAutoClose: {
-				type: Boolean,
-				reflect: true,
-				attribute: 'no-auto-close'
-			},
-			/**
-			 * Opt out of auto-sizing
-			 * @type {boolean}
-			 */
-			noAutoFit: {
-				type: Boolean,
-				reflect: true,
-				attribute: 'no-auto-fit'
-			},
-			/**
-			 * Opt out of focus being automatically moved to the first focusable element in the dropdown when opened
-			 * @type {boolean}
-			 */
-			noAutoFocus: {
-				type: Boolean,
-				reflect: true,
-				attribute: 'no-auto-focus'
-			},
-			/**
-			 * Render with no padding
-			 * @type {boolean}
-			 */
-			noPadding: {
-				type: Boolean,
-				reflect: true,
-				attribute: 'no-padding'
-			},
-			/**
-			 * Render the footer with no padding (if it has content)
-			 * @type {boolean}
-			 */
-			noPaddingFooter: {
-				type: Boolean,
-				reflect: true,
-				attribute: 'no-padding-footer'
-			},
-			/**
-			 * Render the header with no padding (if it has content)
-			 * @type {boolean}
-			 */
-			noPaddingHeader: {
-				type: Boolean,
-				reflect: true,
-				attribute: 'no-padding-header'
-			},
-			/**
-			 * Render without a pointer
-			 * @type {boolean}
-			 */
-			noPointer: {
-				type: Boolean,
-				reflect: true,
-				attribute: 'no-pointer'
-			},
-			/**
-			 * Whether the dropdown is open or not
-			 * @type {boolean}
-			 */
-			opened: {
-				type: Boolean,
-				reflect: true
-			},
-			/**
-			 * Private.
-			 * @ignore
-			 */
-			openedAbove: {
-				type: Boolean,
-				reflect: true,
-				attribute: 'opened-above'
-			},
-			/**
- 			* Optionally render a d2l-focus-trap around the dropdown content
-			 * @type {boolean}
- 			*/
-			trapFocus: {
-				type: Boolean,
-				reflect: true,
-				attribute: 'trap-focus'
-			},
-			/**
-			 * Provide custom offset, positive or negative
-			 * @type {string}
-			 */
-			verticalOffset: {
-				type: String,
-				attribute: 'vertical-offset'
-			},
-			_bottomOverflow: {
-				type: Boolean
-			},
-			_closing: {
-				type: Boolean
-			},
-			_contentOverflow: {
-				type: Boolean
-			},
-			_dropdownContent: {
-				type: Boolean,
-				attribute: 'dropdown-content',
-				reflect: true
-			},
-			_useMobileStyling: {
-				type: Boolean,
-				attribute: 'data-mobile',
-				reflect: true
-			},
-			_hasHeader: {
-				type: Boolean
-			},
-			_hasFooter: {
-				type: Boolean
-			},
-			_contentHeight: {
-				type: Number
-			},
-			_position: {
-				type: Number
-			},
-			_showBackdrop: {
-				type: Boolean
-			},
-			_topOverflow: {
-				type: Boolean
-			},
-			_width: {
-				type: Number
-			}
-		};
-	}
-
-	constructor() {
-		super();
-
-		this.noAutoClose = false;
-		this.noAutoFit = false;
-		this.noAutoFocus = false;
-		this.noMobileCloseButton = false;
-		this.noPadding = false;
-		this.noPaddingFooter = false;
-		this.noPaddingHeader = false;
-		this.noPointer = false;
-		this.mobileBreakpointOverride = 616;
-		this.trapFocus = false;
-		this._useMobileStyling = false;
-
-		this.__opened = false;
-		this.__content = null;
-		this.__previousFocusableAncestor = null;
-		this.__applyFocus = true;
-		this.__dismissibleId = null;
-
-		this._dropdownContent = true;
-		this._bottomOverflow = false;
-		this._topOverflow = false;
-		this._closing = false;
-		this._contentOverflow = false;
-		this._hasHeader = false;
-		this._hasFooter = false;
-		this._showBackdrop = false;
-		this._verticalOffset = defaultVerticalOffset;
-
-		this.__onResize = this.__onResize.bind(this);
-		this.__onAutoCloseFocus = this.__onAutoCloseFocus.bind(this);
-		this.__onAutoCloseClick = this.__onAutoCloseClick.bind(this);
-		this.__toggleScrollStyles = this.__toggleScrollStyles.bind(this);
-		this._handleMobileResize = this._handleMobileResize.bind(this);
-		this.__disconnectResizeObserver = this.__disconnectResizeObserver.bind(this);
-	}
-
-	get opened() {
-		return this.__opened;
-	}
-
-	set opened(val) {
-		const oldVal = this.__opened;
-		if (oldVal !== val) {
-			this.__opened = val;
-			this.requestUpdate('opened', oldVal);
-			this.__openedChanged(val);
-		}
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-
-		window.addEventListener('resize', this.__onResize);
-		this.addEventListener('blur', this.__onAutoCloseFocus, true);
-		document.body.addEventListener('focus', this.__onAutoCloseFocus, true);
-		document.body.addEventListener('click', this.__onAutoCloseClick, true);
-		this.mediaQueryList = window.matchMedia(`(max-width: ${this.mobileBreakpointOverride - 1}px)`);
-		this._useMobileStyling = this.mediaQueryList.matches;
-		if (this.mediaQueryList.addEventListener) this.mediaQueryList.addEventListener('change', this._handleMobileResize);
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		if (this.mediaQueryList.removeEventListener) this.mediaQueryList.removeEventListener('change', this._handleMobileResize);
-		this.removeEventListener('blur', this.__onAutoCloseFocus);
-		window.removeEventListener('resize', this.__onResize);
-		if (document.body) {
-			// DE41322: document.body can be null in some scenarios
-			document.body.removeEventListener('focus', this.__onAutoCloseFocus, true);
-			document.body.removeEventListener('click', this.__onAutoCloseClick, true);
-		}
-		clearDismissible(this.__dismissibleId);
-		this.__dismissibleId = null;
-
-		if (this.__resizeObserver) this.__resizeObserver.disconnect();
-	}
-
-	firstUpdated(changedProperties) {
-		super.firstUpdated(changedProperties);
-
-		this.__content = this.getContentContainer();
-		this.addEventListener('d2l-dropdown-close', this.__onClose);
-		this.addEventListener('d2l-dropdown-position', this.__toggleScrollStyles);
-	}
-
-	updated(changedProperties) {
-		changedProperties.forEach((_, propName) =&gt; {
-			if (propName === 'verticalOffset') {
-				let newVerticalOffset = parseInt(this.verticalOffset);
-				if (isNaN(newVerticalOffset)) {
-					newVerticalOffset = defaultVerticalOffset;
-				}
-				this.style.setProperty('--d2l-dropdown-verticaloffset', `${newVerticalOffset}px`);
-				this._verticalOffset = newVerticalOffset;
-			}
-		});
-	}
-
-	close() {
-		const hide = () =&gt; {
-			this._closing = false;
-			this._showBackdrop = false;
-			this.opened = false;
-		};
-
-		if (!reduceMotion && this._useMobileStyling && this.mobileTray && isVisible(this)) {
-			if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-dropdown-content-width')
-				.addEventListener('animationend', hide, { once: true });
-			this._closing = true;
-			this._showBackdrop = false;
-		} else {
-			hide();
-		}
-	}
-
-	/**
-	 * forceRender is no longer necessary, this is left as a stub so that
-	 * places calling it will not break. It will be removed once the Polymer
-	 * dropdown is swapped over to use this and all instances of
-	 * forceRender are removed.
-	 */
-	forceRender() {}
-
-	getContentContainer() {
-		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-dropdown-content-container');
-	}
-
-	/**
-	 * Private.
-	 */
-	height() {
-		return this.__content && this.__content.offsetHeight;
-	}
-
-	async open(applyFocus) {
-		this.__applyFocus = applyFocus !== undefined ? applyFocus : true;
-		this.opened = true;
-		await this.updateComplete;
-		this._showBackdrop = this._useMobileStyling && this.mobileTray;
-	}
-
-	/**
-	 * Waits for the next resize when elem has a height &gt; 0px,
-	 * then calls the __position function.
-	*/
-	requestRepositionNextResize(elem) {
-		if (!elem) return;
-		if (this.__resizeObserver) this.__resizeObserver.disconnect();
-		this.__resizeObserver = new ResizeObserver(this.__disconnectResizeObserver);
-		this.__resizeObserver.observe(elem);
-	}
-
-	async resize() {
-		if (!this.opened) {
-			return;
-		}
-		this._showBackdrop = this._useMobileStyling && this.mobileTray;
-		await this.__position();
-	}
-
-	/**
-	 * Private.
-	 */
-	scrollTo(scrollTop) {
-		const content = this.__content;
-		if (content) {
-			if (typeof scrollTop === 'number') {
-				content.scrollTop = scrollTop;
-			}
-			return content.scrollTop;
-		}
-	}
-
-	toggleOpen(applyFocus) {
-		if (this.opened) {
-			this.close();
-		} else {
-			this.open(!this.noAutoFocus && applyFocus);
-		}
-	}
-
-	__disconnectResizeObserver(entries) {
-		for (let i = 0; i &lt; entries.length; i++) {
-			const entry = entries[i];
-			if (this.__resizeObserver && entry.contentRect.height !== 0) {
-				this.__resizeObserver.disconnect();
-				// wrap in rAF for Firefox
-				requestAnimationFrame(() =&gt; {
-					if (this.opened) this.__position();
-				});
-				break;
-			}
-		}
-	}
-
-	__getContentBottom() {
-		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-dropdown-content-bottom');
-	}
-
-	__getContentTop() {
-		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-dropdown-content-top');
-	}
-
-	__getOpener() {
-		const opener = findComposedAncestor(this, (elem) =&gt; {
-			if (elem.dropdownOpener) {
-				return true;
-			}
-		});
-		return opener;
-	}
-
-	__getPositionContainer() {
-		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-dropdown-content-position');
-	}
-
-	__getWidthContainer() {
-		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-dropdown-content-width');
-	}
-
-	__handleFooterSlotChange(e) {
-		this._hasFooter = e.target.assignedNodes().length !== 0;
-	}
-
-	__handleHeaderSlotChange(e) {
-		this._hasHeader = e.target.assignedNodes().length !== 0;
-	}
-
-	__onAutoCloseClick(e) {
-		if (!this.opened || this.noAutoClose) {
-			return;
-		}
-		const rootTarget = e.composedPath()[0];
-		const clickInside = isComposedAncestor(this.getContentContainer(), rootTarget) ||
-			isComposedAncestor(this.__getContentTop(), rootTarget) ||
-			isComposedAncestor(this.__getContentBottom(), rootTarget);
-		if (clickInside) {
-			return;
-		}
-		const opener = this.__getOpener();
-		if (isComposedAncestor(opener.getOpenerElement(), rootTarget)) {
-			return;
-		}
-
-		this.close();
-	}
-
-	__onAutoCloseFocus() {
-
-		/* timeout needed to work around lack of support for relatedTarget */
-		setTimeout(() =&gt; {
-			if (!this.opened
-				|| this.noAutoClose
-				|| !document.activeElement
-				|| document.activeElement === this.__previousFocusableAncestor
-				|| document.activeElement === document.body) {
-				return;
-			}
-
-			const activeElement = getComposedActiveElement();
-
-			if (isComposedAncestor(this, activeElement)
-				|| isComposedAncestor(this.__getOpener(), activeElement)) {
-				return;
-			}
-			this.close();
-		}, 0);
-	}
-
-	__onClose(e) {
-
-		if (e.target !== this || !document.activeElement) {
-			return;
-		}
-
-		const activeElement = getComposedActiveElement();
-
-		if (!isComposedAncestor(this, activeElement)) {
-			return;
-		}
-
-		const opener = this.__getOpener();
-		opener.getOpenerElement().focus();
-
-	}
-
-	__onResize() {
-		this.resize();
-	}
-
-	async __openedChanged(newValue) {
-
-		// DE44538: wait for dropdown content to fully render,
-		// otherwise this.getContentContainer() can return null.
-		await this.updateComplete;
-
-		this.__previousFocusableAncestor =
-			newValue === true
-				? getPreviousFocusableAncestor(this, false, false)
-				: null;
-
-		const doOpen = async() =&gt; {
-
-			const content = this.getContentContainer();
-
-			if (!this.noAutoFit) {
-				content.scrollTop = 0;
-			}
-
-			await this.__position();
-			this._showBackdrop = this._useMobileStyling && this.mobileTray;
-			if (!this.noAutoFocus && this.__applyFocus) {
-				const focusable = getFirstFocusableDescendant(this);
-				if (focusable) {
-					// Removing the rAF call can allow infinite focus looping to happen in content using a focus trap
-					requestAnimationFrame(() =&gt; focusable.focus());
-				} else {
-					content.setAttribute('tabindex', '-1');
-					content.focus();
-				}
-			}
-
-			setTimeout(() =&gt;
-				this.dispatchEvent(new CustomEvent('d2l-dropdown-open', { bubbles: true, composed: true })), 0
-			);
-
-			this.__dismissibleId = setDismissible(() =&gt; {
-				this.close();
-			});
-		};
-
-		const ifrauBackdropService = await tryGetIfrauBackdropService();
-
-		if (newValue) {
-
-			if (ifrauBackdropService && this.mobileTray && this._useMobileStyling) {
-				this._ifrauContextInfo = await ifrauBackdropService.showBackdrop();
-			}
-
-			await doOpen();
-
-		} else {
-
-			if (this.__dismissibleId) {
-				clearDismissible(this.__dismissibleId);
-				this.__dismissibleId = null;
-			}
-			if (ifrauBackdropService && this.mobileTray && this._useMobileStyling) {
-				ifrauBackdropService.hideBackdrop();
-				this._ifrauContextInfo = null;
-			}
-			this._showBackdrop = false;
-			await this.updateComplete;
-
-			/** Dispatched when the dropdown is closed */
-			this.dispatchEvent(new CustomEvent('d2l-dropdown-close', { bubbles: true, composed: true }));
-
-		}
-	}
-
-	async __position(ignoreVertical, contentRect) {
-
-		const opener = this.__getOpener();
-		if (!opener) {
-			return;
-		}
-		const target = opener.getOpenerElement();
-		if (!target) {
-			return;
-		}
-
-		const content = this.getContentContainer();
-		const header = this.__getContentTop();
-		const footer = this.__getContentBottom();
-
-		if (!this.noAutoFit) {
-			this._contentHeight = null;
-		}
-
-		/* don't let dropdown content horizontally overflow viewport */
-		this._width = null;
-
-		const openerPosition = window.getComputedStyle(opener, null).getPropertyValue('position');
-		const boundingContainer = getBoundingAncestor(target.parentNode);
-		const boundingContainerRect = boundingContainer.getBoundingClientRect();
-		const scrollHeight = boundingContainer.scrollHeight;
-
-		await this.updateComplete;
-
-		// position check in case consuming app (LMS) has overriden position to make content absolute wrt document
-		const bounded = (openerPosition === 'relative' && boundingContainer !== document.documentElement);
-
-		const adjustPosition = async() =&gt; {
-
-			const targetRect = target.getBoundingClientRect();
-			contentRect = contentRect ? contentRect : content.getBoundingClientRect();
-			const headerFooterHeight = header.getBoundingClientRect().height + footer.getBoundingClientRect().height;
-
-			const height = this.minHeight ? this.minHeight : Math.min(this.maxHeight ? this.maxHeight : Number.MAX_VALUE, contentRect.height + headerFooterHeight);
-			const spaceRequired = {
-				height: height + 10,
-				width: contentRect.width
-			};
-			let spaceAround;
-			let spaceAroundScroll;
-			if (bounded) {
-				spaceAround = this._constrainSpaceAround({
-					// allow for target offset + outer margin
-					above: targetRect.top - boundingContainerRect.top - this._verticalOffset - outerMarginTopBottom,
-					// allow for target offset + outer margin
-					below: boundingContainerRect.bottom - targetRect.bottom - this._verticalOffset - outerMarginTopBottom,
-					// allow for outer margin
-					left: targetRect.left - boundingContainerRect.left - 20,
-					// allow for outer margin
-					right: boundingContainerRect.right - targetRect.right - 20
-				}, spaceRequired, targetRect);
-				spaceAroundScroll = this._constrainSpaceAround({
-					above: targetRect.top - boundingContainerRect.top + boundingContainer.scrollTop,
-					below: scrollHeight - targetRect.bottom + boundingContainerRect.top - boundingContainer.scrollTop
-				}, spaceRequired, targetRect);
-			} else {
-				spaceAround = this._constrainSpaceAround({
-					// allow for target offset + outer margin
-					above: targetRect.top - this._verticalOffset - outerMarginTopBottom,
-					// allow for target offset + outer margin
-					below: window.innerHeight - targetRect.bottom - this._verticalOffset - outerMarginTopBottom,
-					// allow for outer margin
-					left: targetRect.left - 20,
-					// allow for outer margin
-					right: document.documentElement.clientWidth - targetRect.right - 15
-				}, spaceRequired, targetRect);
-				spaceAroundScroll = this._constrainSpaceAround({
-					above: targetRect.top + document.documentElement.scrollTop,
-					below: scrollHeight - targetRect.bottom - document.documentElement.scrollTop
-				}, spaceRequired, targetRect);
-			}
-
-			if (!ignoreVertical) {
-				this.openedAbove = this._getOpenedAbove(spaceAround, spaceAroundScroll, spaceRequired);
-			}
-
-			const centerDelta = contentRect.width - targetRect.width;
-			const position = this._getPosition(spaceAround, centerDelta);
-			if (position !== null) {
-				this._position = position;
-			}
-
-			//Calculate height available to the dropdown contents for overflow because that is the only area capable of scrolling
-			const availableHeight = this.openedAbove ? spaceAround.above : spaceAround.below;
-			if (!this.noAutoFit && availableHeight && availableHeight &gt; 0) {
-				//Only apply maximum if it's less than space available and the header/footer alone won't exceed it (content must be visible)
-				this._contentHeight = this.maxHeight !== null
-					&& availableHeight &gt; this.maxHeight
-					&& headerFooterHeight &lt; this.maxHeight
-					? this.maxHeight - headerFooterHeight - 2
-					: availableHeight - headerFooterHeight;
-				this.__toggleOverflowY(contentRect.height + headerFooterHeight &gt; availableHeight);
-
-				// ensure the content height has updated when the __toggleScrollStyles event handler runs
-				await this.updateComplete;
-			}
-
-			/** Dispatched when the dropdown position finishes adjusting */
-			this.dispatchEvent(new CustomEvent('d2l-dropdown-position', { bubbles: true, composed: true }));
-		};
-
-		const scrollWidth = Math.max(header.scrollWidth, content.scrollWidth, footer.scrollWidth);
-		const availableWidth = (bounded ? boundingContainerRect.width - 60 : window.innerWidth - 40);
-		this._width = (availableWidth &gt; scrollWidth ? scrollWidth : availableWidth) ;
-
-		await this.updateComplete;
-
-		await adjustPosition();
-	}
-
-	__toggleOverflowY(isOverflowing) {
-		if (!this.__content) {
-			return;
-		}
-		if (!this._contentHeight) {
-			return;
-		}
-		this._contentOverflow = isOverflowing || this.__content.scrollHeight &gt; this._contentHeight;
-	}
-
-	__toggleScrollStyles() {
-		/* scrollHeight incorrect in IE by 4px second time opened */
-		this._bottomOverflow = this.__content.scrollHeight - (this.__content.scrollTop + this.__content.clientHeight) &gt;= 5;
-		this._topOverflow = this.__content.scrollTop !== 0;
-	}
-
-	_constrainSpaceAround(spaceAround, spaceRequired, targetRect) {
-		const constrained = { ...spaceAround };
-		if (this.boundary) {
-			constrained.above = this.boundary.above &gt;= 0 ? Math.min(spaceAround.above, this.boundary.above) : spaceAround.above;
-			constrained.below = this.boundary.below &gt;= 0 ? Math.min(spaceAround.below, this.boundary.below) : spaceAround.below;
-			constrained.left = this.boundary.left &gt;= 0 ? Math.min(spaceAround.left, this.boundary.left) : spaceAround.left;
-			constrained.right = this.boundary.right &gt;= 0 ? Math.min(spaceAround.right, this.boundary.right) : spaceAround.right;
-		}
-		const isRTL = this.getAttribute('dir') === 'rtl';
-		if ((this.align === 'start' && !isRTL) || (this.align === 'end' && isRTL)) {
-			constrained.left = Math.max(0, spaceRequired.width - (targetRect.width + spaceAround.right));
-		} else if ((this.align === 'start' && isRTL) || (this.align === 'end' && !isRTL)) {
-			constrained.right = Math.max(0, spaceRequired.width - (targetRect.width + spaceAround.left));
-		}
-		return constrained;
-	}
-
-	_getBottomTrayStyling() {
-
-		let maxHeightOverride;
-		let availableHeight = Math.min(window.innerHeight, window.screen.height);
-		if (this._ifrauContextInfo) availableHeight = this._ifrauContextInfo.availableHeight;
-		// default maximum height for bottom tray (42px margin)
-		const mobileTrayMaxHeightDefault = availableHeight - minBackdropHeightMobile;
-		if (this.maxHeight) {
-			// if maxWidth provided is smaller, use the maxWidth
-			maxHeightOverride = Math.min(mobileTrayMaxHeightDefault, this.maxHeight);
-		} else {
-			maxHeightOverride = mobileTrayMaxHeightDefault;
-		}
-		maxHeightOverride = `${maxHeightOverride}px`;
-
-		let bottomOverride;
-		if (this._ifrauContextInfo) {
-			// Bottom override is measured as
-			// the distance from the bottom of the screen
-			const screenHeight =
-				window.innerHeight
-				- this._ifrauContextInfo.availableHeight
-				+ Math.min(this._ifrauContextInfo.top, 0);
-			bottomOverride = `${screenHeight}px`;
-		}
-
-		const widthOverride = '100vw';
-
-		const widthStyle = {
-			minWidth: widthOverride,
-			width: widthOverride,
-			maxHeight: maxHeightOverride,
-			bottom: bottomOverride
-		};
-
-		const contentWidthStyle = {
-			/* set width of content in addition to width container so header and footer borders are full width */
-			width: widthOverride
-		};
-
-		const headerStyle = {
-			...contentWidthStyle,
-			minHeight: this._hasHeader ? 'auto' : '5px'
-		};
-
-		const footerStyle = {
-			...contentWidthStyle,
-			minHeight: this._hasFooter || !this.noMobileCloseButton ? 'auto' : '5px'
-		};
-
-		const contentStyle = {
-			...contentWidthStyle,
-			maxHeight: maxHeightOverride,
-			overflowY: this._contentOverflow ? 'auto' : 'hidden'
-		};
-
-		const closeButtonStyles = {
-			display: !this.noMobileCloseButton ? 'inline-block' : 'none',
-			width: this._getTrayFooterWidth(),
-			padding: this._hasFooter && !this.noPaddingFooter ? '12px 0 0 0' : '12px',
-			margin: this._getTrayFooterMargin()
-		};
-
-		return {
-			'width' : widthStyle,
-			'header' : headerStyle,
-			'footer' : footerStyle,
-			'content' : contentStyle,
-			'close' : closeButtonStyles
-		};
-	}
-
-	_getDropdownStyling() {
-		const widthStyle = {
-			maxWidth: this.maxWidth ? `${this.maxWidth}px` : '',
-			minWidth: this.minWidth ? `${this.minWidth}px` : '',
-			/* add 2 to content width since scrollWidth does not include border */
-			width: this._width ? `${this._width + 20}px` : ''
-		};
-
-		const contentWidthStyle = {
-			minWidth: this.minWidth ? `${this.minWidth}px` : '',
-			/* set width of content in addition to width container so header and footer borders are full width */
-			width: this._width ? `${this._width + 18}px` : '',
-		};
-
-		const contentStyle = {
-			...contentWidthStyle,
-			maxHeight: this._contentHeight ? `${this._contentHeight}px` : '',
-			overflowY: this._contentOverflow ? 'auto' : 'hidden'
-		};
-
-		const closeButtonStyle = {
-			display: 'none',
-		};
-
-		return {
-			'width' : widthStyle,
-			'content' : contentStyle,
-			'close' : closeButtonStyle,
-			'header' : contentWidthStyle,
-			'footer' : contentWidthStyle
-		};
-	}
-
-	_getLeftRightTrayStyling() {
-
-		let maxWidthOverride = this.maxWidth;
-		let availableWidth = Math.min(window.innerWidth, window.screen.width);
-		if (this._ifrauContextInfo) availableWidth = this._ifrauContextInfo.availableWidth;
-		// default maximum width for tray (30px margin)
-		const mobileTrayMaxWidthDefault = Math.min(availableWidth - minBackdropWidthMobile, 420);
-		if (maxWidthOverride) {
-			// if maxWidth provided is smaller, use the maxWidth
-			maxWidthOverride = Math.min(mobileTrayMaxWidthDefault, maxWidthOverride);
-		} else {
-			maxWidthOverride = mobileTrayMaxWidthDefault;
-		}
-
-		let minWidthOverride = this.minWidth;
-		// minimum size - 285px
-		const mobileTrayMinWidthDefault = 285;
-		if (minWidthOverride) {
-			// if minWidth provided is smaller, use the minumum width for tray
-			minWidthOverride = Math.max(mobileTrayMinWidthDefault, minWidthOverride);
-		} else {
-			minWidthOverride = mobileTrayMinWidthDefault;
-		}
-
-		// if no width property set, automatically size to maximum width
-		let widthOverride = this._width ? this._width : maxWidthOverride;
-		// ensure width is between minWidth and maxWidth
-		if (widthOverride && maxWidthOverride && widthOverride &gt; (maxWidthOverride - 20)) widthOverride = maxWidthOverride - 20;
-		if (widthOverride && minWidthOverride && widthOverride &lt; (minWidthOverride - 20)) widthOverride = minWidthOverride - 20;
-
-		maxWidthOverride = `${maxWidthOverride}px`;
-		minWidthOverride = `${minWidthOverride}px`;
-		const  contentWidth = `${widthOverride + 18}px`;
-		/* add 2 to content width since scrollWidth does not include border */
-		const containerWidth = `${widthOverride + 20}px`;
-
-		let maxHeightOverride = '';
-		if (this._ifrauContextInfo) maxHeightOverride = `${this._ifrauContextInfo.availableHeight}px`;
-
-		let topOverride;
-		if (this._ifrauContextInfo) {
-			// if inside iframe, use ifrauContext top as top of screen
-			topOverride = `${this._ifrauContextInfo.top &lt; 0 ? -this._ifrauContextInfo.top : 0}px`;
-		} else if (window.innerHeight &gt; window.screen.height) {
-			// non-responsive page, manually override top to scroll distance
-			topOverride = window.pageYOffset;
-		}
-
-		let rightOverride;
-		let leftOverride;
-		if (this.mobileTray === 'right') {
-			// On non-responsive pages, the innerWidth may be wider than the screen,
-			// override right to stick to right of viewport
-			rightOverride = `${Math.max(window.innerWidth - window.screen.width, 0)}px`;
-		}
-		if (this.mobileTray === 'left') {
-			// On non-responsive pages, the innerWidth may be wider than the screen,
-			// override left to stick to left of viewport
-			leftOverride = `${Math.max(window.innerWidth - window.screen.width, 0)}px`;
-		}
-
-		const widthStyle = {
-			maxWidth: maxWidthOverride,
-			minWidth: minWidthOverride,
-			width: containerWidth,
-			maxHeight: maxHeightOverride,
-			top: topOverride,
-			right: rightOverride,
-			left: leftOverride,
-		};
-
-		const contentWidthStyle = {
-			minWidth: minWidthOverride,
-			/* set width of content in addition to width container so header and footer borders are full width */
-			width: contentWidth,
-		};
-
-		const headerStyle = {
-			...contentWidthStyle,
-			minHeight: this._hasHeader ? 'auto' : '5px'
-		};
-
-		const footerStyle = {
-			...contentWidthStyle,
-			minHeight: this._hasFooter || !this.noMobileCloseButton ? 'auto' : '5px'
-		};
-
-		const contentStyle = {
-			...contentWidthStyle,
-			maxHeight: maxHeightOverride,
-			overflowY: this._contentOverflow ? 'auto' : 'hidden'
-		};
-
-		const closeButtonStyles = {
-			display: !this.noMobileCloseButton ? 'inline-block' : 'none',
-			width: this._getTrayFooterWidth(),
-			padding: this._hasFooter && !this.noPaddingFooter ? '12px 0 0 0' : '12px',
-			margin: this._getTrayFooterMargin()
-		};
-
-		return {
-			'width' : widthStyle,
-			'header' : headerStyle,
-			'footer' : footerStyle,
-			'content' : contentStyle,
-			'close' : closeButtonStyles
-		};
-	}
-
-	_getOpenedAbove(spaceAround, spaceAroundScroll, spaceRequired) {
-		if (spaceAround.below &gt;= spaceRequired.height) {
-			return false;
-		}
-		if (spaceAround.above &gt;= spaceRequired.height) {
-			return true;
-		}
-		if (!this.noAutoFit) {
-			// if auto-fit is enabled, scroll will be enabled for the
-			// inner content so it will always fit in the available space
-			// so pick the largest space it can be displayed in
-			return spaceAround.above &gt; spaceAround.below;
-		}
-		if (spaceAroundScroll.below &gt;= spaceRequired.height) {
-			return false;
-		}
-		if (spaceAroundScroll.above &gt;= spaceRequired.height) {
-			return true;
-		}
-		// if auto-fit is disabled and it doesn't fit in the scrollable space
-		// above or below, always open down because it can add scrollable space
-		return false;
-	}
-
-	_getPosition(spaceAround, centerDelta) {
-
-		const contentXAdjustment = centerDelta / 2;
-		if (centerDelta &lt;= 0) {
-			return contentXAdjustment * -1;
-		}
-		if (spaceAround.left &gt; contentXAdjustment && spaceAround.right &gt; contentXAdjustment) {
-			// center with target
-			return contentXAdjustment * -1;
-		}
-		const isRTL = this.getAttribute('dir') === 'rtl';
-		if (!isRTL) {
-			if (spaceAround.left &lt; contentXAdjustment) {
-				// slide content right (not enough space to center)
-				return spaceAround.left * -1;
-			} else if (spaceAround.right &lt; contentXAdjustment) {
-				// slide content left (not enough space to center)
-				return (centerDelta * -1) + spaceAround.right;
-			}
-		} else {
-			if (spaceAround.left &lt; contentXAdjustment) {
-				// slide content right (not enough space to center)
-				return (centerDelta * -1) + spaceAround.left;
-			} else if (spaceAround.right &lt; contentXAdjustment) {
-				// slide content left (not enough space to center)
-				return spaceAround.right * -1;
-			}
-		}
-		return null;
-	}
-
-	_getTrayFooterMargin() {
-		let footerMargin;
-		if (this._hasFooter) {
-			footerMargin = '0';
-		} else if (this.getAttribute('dir') === 'rtl') {
-			footerMargin = '-20px -20px -20px 0px';
-		} else {
-			footerMargin = '-20px 0 -20px -20px';
-		}
-		return footerMargin;
-	}
-
-	_getTrayFooterWidth() {
-		let footerWidth;
-		if (this.noPaddingFooter) {
-			footerWidth = 'calc(100% - 24px)';
-		} else if (this._hasFooter) {
-			footerWidth = '100%';
-		} else {
-			footerWidth = 'calc(100% + 16px)';
-		}
-		return footerWidth;
-	}
-
-	_handleFocusTrapEnter() {
-		if (this.__applyFocus && !this.noAutoFocus) {
-			const content = this.getContentContainer();
-			const focusable = getFirstFocusableDescendant(content);
-			if (focusable) {
-				// Removing the rAF call can allow infinite focus looping to happen in content using a focus trap
-				requestAnimationFrame(() =&gt; focusable.focus());
-			} else {
-				content.setAttribute('tabindex', '-1');
-				content.focus();
-			}
-		}
-		/** Dispatched when user focus enters the dropdown content (trap-focus option only) */
-		this.dispatchEvent(new CustomEvent('d2l-dropdown-focus-enter', { detail:{ applyFocus: this.__applyFocus } }));
-	}
-
-	async _handleMobileResize() {
-		this._useMobileStyling =  this.mediaQueryList.matches;
-		if (this.opened) this._showBackdrop = this._useMobileStyling && this.mobileTray;
-		if (this.opened) await this.__position();
-	}
-
-	_renderContent() {
-		const positionStyle = {};
-		const isRTL = this.getAttribute('dir') === 'rtl';
-		if (this._position) {
-			if (!isRTL) {
-				positionStyle.left = `${this._position}px`;
-			} else {
-				positionStyle.right = `${this._position}px`;
-			}
-		}
-
-		const mobileTrayRightLeft = this._useMobileStyling && (this.mobileTray === 'right' || this.mobileTray === 'left');
-		const mobileTrayBottom = this._useMobileStyling && (this.mobileTray === 'bottom');
-
-		let stylesMap;
-		if (mobileTrayBottom) {
-			stylesMap = this._getBottomTrayStyling();
-		} else if (mobileTrayRightLeft) {
-			stylesMap = this._getLeftRightTrayStyling();
-		} else {
-			stylesMap = this._getDropdownStyling();
-		}
-		const widthStyle = stylesMap['width'];
-		const headerStyle = stylesMap['header'];
-		const footerStyle = stylesMap['footer'];
-		const contentStyle = stylesMap['content'];
-		const closeButtonStyles = stylesMap['close'];
-
-		const topClasses = {
-			'd2l-dropdown-content-top': true,
-			'd2l-dropdown-content-top-scroll': this._topOverflow,
-			'd2l-dropdown-content-header': this._hasHeader
-		};
-		const bottomClasses = {
-			'd2l-dropdown-content-bottom': true,
-			'd2l-dropdown-content-bottom-scroll': this._bottomOverflow,
-			'd2l-dropdown-content-footer': this._hasFooter || (this._useMobileStyling && this.mobileTray && !this.noMobileCloseButton)
-		};
-
-		let dropdownContentSlots = html`
-			&lt;div
-			id="d2l-dropdown-wrapper"
-			class="d2l-dropdown-content-width"
-			style=${styleMap(widthStyle)}
-			?data-closing="${this._closing}"&gt;
-				&lt;div class=${classMap(topClasses)} style=${styleMap(headerStyle)}&gt;
-					&lt;slot name="header" @slotchange="${this.__handleHeaderSlotChange}"&gt;&lt;/slot&gt;
-				&lt;/div&gt;
-				&lt;div
-				class="d2l-dropdown-content-container"
-				style=${styleMap(contentStyle)}
-				@scroll=${this.__toggleScrollStyles}&gt;
-					&lt;slot class="d2l-dropdown-content-slot"&gt;&lt;/slot&gt;
-				&lt;/div&gt;
-				&lt;div class=${classMap(bottomClasses)} style=${styleMap(footerStyle)}&gt;
-					&lt;slot name="footer" @slotchange="${this.__handleFooterSlotChange}"&gt;&lt;/slot&gt;
-					&lt;d2l-button
-						class="dropdown-close-btn"
-						style=${styleMap(closeButtonStyles)}
-						@click=${this.close}&gt;
-						${this.localize('components.dropdown.close')}
-					&lt;/d2l-button&gt;
-				&lt;/div&gt;
-			&lt;/div&gt;
-		`;
-
-		if (this.trapFocus) {
-			dropdownContentSlots = html`
-			&lt;d2l-focus-trap
-			@d2l-focus-trap-enter="${this._handleFocusTrapEnter}"
-			?trap="${this.opened}"&gt;
-			${dropdownContentSlots}
-			&lt;/d2l-focus-trap&gt;`;
-		}
-
-		const dropdown =  html`
-			&lt;div class="d2l-dropdown-content-position" style=${styleMap(positionStyle)}&gt;
-					 ${dropdownContentSlots}
-			&lt;/div&gt;
-		`;
-
-		return (this.mobileTray) ? html`
-			${dropdown}
-			&lt;d2l-backdrop
-				for-target="d2l-dropdown-wrapper"
-				?shown="${this._showBackdrop}" &gt;
-			&lt;/d2l-backdrop&gt;`
-			: html`${dropdown}`;
-	}
-
-};
-</code></pre>
-
-
-<pre class="d2l-code d2l-code-dark line-numbers"><code class="language-javascript">import '../colors/colors.js';
-import { css, html, LitElement } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { offscreenStyles } from '../offscreen/offscreen.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
-import { styleMap } from 'lit/directives/style-map.js';
-
-/**
- * A container element that provides specific layout using several slots.
- * @slot content - Slot for primary content such as title and supplementary info (no actionable elements)
- * @slot actions - Slot for buttons and dropdown openers to be placed in top right corner of header
- * @slot badge - Slot for badge content, such as a profile image or status indicator
- * @slot footer - Slot for footer content, such secondary actions
- * @slot header - Slot for header content, such as course image (no actionable elements)
- */
-class Card extends FocusMixin(LitElement) {
-
-	static get properties() {
-		return {
-			/**
-			 * Style the card's content and footer as centered horizontally
-			 * @type {boolean}
-			 */
-			alignCenter: { type: Boolean, attribute: 'align-center', reflect: true },
-			/**
-			 * Download a URL instead of navigating to it
-			 * @type {boolean}
-			 */
-			download: { type: Boolean, reflect: true },
-			/**
-			 * Location for the primary action/navigation
-			 * @type {string}
-			 */
-			href: { type: String, reflect: true },
-			/**
-			 * Indicates the human language of the linked resource; purely advisory, with no built-in functionality
-			 * @type {string}
-			 */
-			hreflang: { type: String, reflect: true },
-			/**
-			 * Specifies the relationship of the target object to the link object
-			 * @type {string}
-			 */
-			rel: { type: String, reflect: true },
-			/**
-			 * Subtle aesthetic on non-white backgrounds
-			 * @type {boolean}
-			 */
-			subtle: { type: Boolean, reflect: true },
-			/**
-			 * Where to display the linked URL
-			 * @type {string}
-			 */
-			target: { type: String, reflect: true },
-			/**
-			 * Accessible text for the card (will be announced when AT user focuses)
-			 * @type {string}
-			 */
-			text: { type: String, reflect: true },
-			/**
-			 * Specifies the media type in the form of a MIME type for the linked URL; purely advisory, with no built-in functionality
-			 * @type {string}
-			 */
-			type: { type: String, reflect: true },
-			_active: { type: Boolean, reflect: true },
-			_dropdownActionOpen: { type: Boolean, attribute: '_dropdown-action-open', reflect: true },
-			_hover: { type: Boolean },
-			_badgeMarginTop: { type: String },
-			_footerHidden: { type: Boolean },
-			_tooltipShowing: { type: Boolean, attribute: '_tooltip_showing', reflect: true }
-		};
-	}
-
-	static get styles() {
-		return [offscreenStyles, css`
-			:host {
-				background-color: #ffffff;
-				border: 1px solid var(--d2l-color-gypsum);
-				border-radius: 6px;
-				box-sizing: border-box;
-				display: inline-block;
-				position: relative;
-				z-index: 0;
-			}
-			.d2l-card-container {
-				align-items: flex-start; /* required so that footer will not stretch to 100% width */
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-				position: relative;
-			}
-			.d2l-card-link-container {
-				flex-basis: auto;
-				flex-grow: 1;
-				flex-shrink: 1;
-				width: 100%; /* required for Legacy-Edge and FF when align-items: flex-start is specified */
-			}
-			.d2l-card-link-text {
-				display: inline-block;
-			}
-			.d2l-card-header {
-				border-start-end-radius: 6px;
-				border-start-start-radius: 6px;
-				overflow: hidden;
-			}
-
-			a {
-				bottom: -1px;
-				display: block;
-				left: -1px;
-				outline: none;
-				position: absolute;
-				right: -1px;
-				top: -1px;
-				z-index: 1;
-			}
-			:host([subtle]) a {
-				bottom: 0;
-				left: 0;
-				right: 0;
-				top: 0;
-			}
-
-			:host(:hover) a {
-				bottom: -5px;
-			}
-			:host([subtle]:hover) a {
-				bottom: -4px;
-			}
-
-			.d2l-card-content {
-				padding: 1.2rem 0.8rem 0 0.8rem;
-			}
-			:host([align-center]) .d2l-card-content {
-				text-align: center;
-			}
-
-			.d2l-card-footer-hidden .d2l-card-content {
-				padding-bottom: 1.2rem;
-			}
-			.d2l-card-actions {
-				inset-inline-end: 0.6rem;
-				position: absolute;
-				top: 0.6rem;
-				/* this must be higher than footer z-index so dropdowns will be on top */
-				z-index: 3;
-			}
-			.d2l-card-actions ::slotted(*) {
-				margin-inline-start: 0.3rem;
-			}
-			.d2l-card-badge {
-				line-height: 0;
-				padding: 0 0.8rem;
-			}
-			.d2l-card-footer {
-				box-sizing: border-box;
-				flex: none;
-				padding: 1.2rem 0.8rem 0.6rem 0.8rem;
-				pointer-events: none;
-				width: 100%;
-				z-index: 2;
-			}
-			:host([align-center]) .d2l-card-footer {
-				text-align: center;
-			}
-
-			.d2l-card-footer ::slotted([slot="footer"]) {
-				pointer-events: all;
-			}
-
-			.d2l-card-footer-hidden .d2l-card-footer {
-				box-sizing: content-box;
-				height: auto;
-			}
-
-			:host([subtle]) {
-				border: none;
-			}
-			:host([subtle][href]) {
-				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03);
-			}
-			:host([href]:not([_active]):hover) {
-				box-shadow: 0 2px 14px 1px rgba(0, 0, 0, 0.06);
-			}
-			:host([subtle][href]:not([_active]):hover) {
-				box-shadow: 0 4px 18px 2px rgba(0, 0, 0, 0.06);
-			}
-			${getFocusRingStyles(() => ':host([_active])', {'extraStyles': css`border-color: transparent;`})}
-			/* .d2l-card-link-container-hover is used to only color/underline when
-			hovering the anchor; these styles are not applied when hovering actions */
-			:host([href]) .d2l-card-link-container-hover,
-			:host([href][_active]) .d2l-card-content {
-				color: var(--d2l-color-celestine);
-				text-decoration: underline;
-			}
-			/* this is needed to ensure tooltip is not be clipped by adjacent cards */
-			:host([_tooltip_showing]) {
-				z-index: 1;
-			}
-			/* this is needed to ensure open menu will be ontop of adjacent cards */
-			:host([_dropdown-action-open]) {
-				z-index: 2;
-			}
-			@media (prefers-reduced-motion: no-preference) {
-				:host {
-					transition: box-shadow 0.2s;
-				}
-			}
-			@media (prefers-contrast: more) {
-				:host([subtle]) {
-					border: 1px solid var(--d2l-color-gypsum);;
-				}
-			}
-		`];
-	}
-
-	constructor() {
-		super();
-		this.alignCenter = false;
-		this.download = false;
-		this.subtle = false;
-		this._active = false;
-		this._dropdownActionOpen = false;
-		this._footerHidden = true;
-		this._hover = false;
-		this._tooltipShowing = false;
-		this._onBadgeResize = this._onBadgeResize.bind(this);
-		this._onFooterResize = this._onFooterResize.bind(this);
-	}
-
-	static get focusElementSelector() {
-		return 'a';
-	}
-
-	firstUpdated(changedProperties) {
-		super.firstUpdated(changedProperties);
-		const badgeObserver = new ResizeObserver(this._onBadgeResize);
-		badgeObserver.observe(this.shadowRoot.querySelector('.d2l-card-badge'));
-		const footerObserver = new ResizeObserver(this._onFooterResize);
-		footerObserver.observe(this.shadowRoot.querySelector('.d2l-card-footer'));
-	}
-
-	render() {
-
-		const containerClass = {
-			'd2l-card-container': true,
-			'd2l-visible-on-ancestor-target': true,
-			'd2l-card-footer-hidden': this._footerHidden
-		};
-
-		const linkContainerClass = {
-			'd2l-card-link-container': true,
-			'd2l-card-link-container-hover': this._hover
-		};
-
-		const badgeStyle = {};
-		if (this._badgeMarginTop) badgeStyle.marginTop = this._badgeMarginTop;
-
-		const footerClass = {
-			'd2l-card-footer': true,
-			'd2l-offscreen': this._footerHidden
-		};
-
-		return html`
-			&lt;div class="${classMap(containerClass)}"
-				@d2l-dropdown-open="${this._onDropdownOpen}"
-				@d2l-dropdown-close="${this._onDropdownClose}"
-				@d2l-tooltip-show="${this._onTooltipShow}"
-				@d2l-tooltip-hide="${this._onTooltipHide}"&gt;
-				&lt;a @blur="${this._onLinkBlur}"
-					?download="${this.download}"
-					@focus="${this._onLinkFocus}"
-					href="${ifDefined(this.href ? this.href : undefined)}"
-					hreflang="${ifDefined(this.hreflang)}"
-					@mouseenter="${this._onLinkMouseEnter}"
-					@mouseleave="${this._onLinkMouseLeave}"
-					rel="${ifDefined(this.rel)}"
-					target="${ifDefined(this.target)}"
-					type="${ifDefined(this.type)}"&gt;
-					&lt;span class="d2l-card-link-text d2l-offscreen"&gt;${this.text}&lt;/span&gt;
-				&lt;/a&gt;
-				&lt;div class="${classMap(linkContainerClass)}"&gt;
-					&lt;div class="d2l-card-header"&gt;&lt;slot name="header"&gt;&lt;/slot&gt;&lt;/div&gt;
-					&lt;div class="d2l-card-badge" style="${styleMap(badgeStyle)}"&gt;&lt;slot name="badge"&gt;&lt;/slot&gt;&lt;/div&gt;
-					&lt;div class="d2l-card-content"&gt;&lt;slot name="content"&gt;&lt;/slot&gt;&lt;/div&gt;
-				&lt;/div&gt;
-				&lt;div class="d2l-card-actions"&gt;&lt;slot name="actions"&gt;&lt;/slot&gt;&lt;/div&gt;
-				&lt;div class="${classMap(footerClass)}"&gt;&lt;slot name="footer"&gt;&lt;/slot&gt;&lt;/div&gt;
-			&lt;/div&gt;
-		`;
-	}
-
-	_onBadgeResize(entries) {
-		if (!entries || entries.length === 0) return;
-		const entry = entries[0];
-		this._badgeMarginTop = `${-0.5 * entry.contentRect.height}px`;
-	}
-
-	_onDropdownClose() {
-		this._dropdownActionOpen = false;
-	}
-
-	_onDropdownOpen() {
-		this._dropdownActionOpen = true;
-	}
-
-	_onFooterResize(entries) {
-		if (!entries || entries.length === 0) return;
-		const entry = entries[0];
-		// firefox has a rounding error when calculating the height of the contentRect
-		// with `box-sizing: border-box;` so check for numbers which are close to 0 as well
-		this._footerHidden = (entry.contentRect.height &lt; 1);
-	}
-
-	_onLinkBlur() {
-		this._active = false;
-	}
-
-	_onLinkFocus() {
-		this._active = true;
-	}
-
-	_onLinkMouseEnter() {
-		this._hover = true;
-	}
-
-	_onLinkMouseLeave() {
-		this._hover = false;
-	}
-
-	_onTooltipHide() {
-		this._tooltipShowing = false;
-	}
-
-	_onTooltipShow() {
-		this._tooltipShowing = true;
-	}
-
-}
-
-customElements.define('d2l-card', Card);
-</code></pre>
-
 		<h2 class="d2l-heading-3">Language Samples</h2>
 
 <pre class="d2l-code d2l-code-dark line-numbers"><code class="language-arduino">// digital pin 2 has a pushbutton attached to it. Give it a name: