npm - @brightspace-ui/core - Versions diffs - 3.227.3 → 3.227.5 - Mend

@brightspace-ui/core 3.227.3 → 3.227.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (179) hide show

package/components/button/button.js +8 -8
package/components/colors/colors.js +8 -0
package/components/count-badge/count-badge-icon.js +1 -1
package/components/count-badge/count-badge-mixin.js +4 -4
package/components/demo/test/demo-page-settings.test.js +25 -0
package/components/demo/test/demo-page.test.js +17 -0
package/package.json +1 -1
package/components/alert/demo/alert-toast.html +0 -106
package/components/alert/demo/alert.html +0 -82
package/components/backdrop/demo/backdrop-loading.html +0 -166
package/components/backdrop/demo/backdrop.html +0 -57
package/components/breadcrumbs/demo/breadcrumbs.html +0 -53
package/components/button/demo/button-add.html +0 -55
package/components/button/demo/button-copy.html +0 -122
package/components/button/demo/button-icon.html +0 -174
package/components/button/demo/button-move.html +0 -38
package/components/button/demo/button-split.html +0 -76
package/components/button/demo/button-subtle.html +0 -132
package/components/button/demo/button-toggle.html +0 -80
package/components/button/demo/button.html +0 -67
package/components/button/demo/floating-buttons-in-frame.html +0 -44
package/components/button/demo/floating-buttons-in-tabs.html +0 -244
package/components/button/demo/floating-buttons-page.html +0 -100
package/components/button/demo/floating-buttons.html +0 -101
package/components/calendar/demo/calendar.html +0 -76
package/components/card/demo/card.html +0 -304
package/components/collapsible-panel/demo/collapsible-panel.html +0 -218
package/components/colors/demo/color-swatch.js +0 -240
package/components/colors/demo/colors.html +0 -139
package/components/count-badge/demo/count-badge-icon.html +0 -48
package/components/count-badge/demo/count-badge.html +0 -73
package/components/demo/demo/demo-snippet.html +0 -71
package/components/description-list/demo/description-list-test.js +0 -142
package/components/description-list/demo/description-list.html +0 -48
package/components/dialog/demo/dialog-async-content-until.js +0 -89
package/components/dialog/demo/dialog-async-content.js +0 -72
package/components/dialog/demo/dialog-confirm.html +0 -102
package/components/dialog/demo/dialog-container.js +0 -40
package/components/dialog/demo/dialog-fullscreen.html +0 -273
package/components/dialog/demo/dialog-nested.html +0 -94
package/components/dialog/demo/dialog.html +0 -398
package/components/dropdown/demo/dropdown-button.html +0 -102
package/components/dropdown/demo/dropdown-context-menu.html +0 -129
package/components/dropdown/demo/dropdown-flicker-inner.html +0 -70
package/components/dropdown/demo/dropdown-flicker.html +0 -142
package/components/dropdown/demo/dropdown-menu-demo-view.js +0 -37
package/components/dropdown/demo/dropdown-menu.html +0 -227
package/components/dropdown/demo/dropdown-more.html +0 -160
package/components/dropdown/demo/dropdown-positioning.html +0 -127
package/components/dropdown/demo/dropdown-tabs.html +0 -87
package/components/dropdown/demo/dropdown.html +0 -217
package/components/empty-state/demo/empty-state.html +0 -94
package/components/expand-collapse/demo/expand-collapse-content.html +0 -58
package/components/filter/demo/filter-load-more-demo.js +0 -182
package/components/filter/demo/filter-overflow-group.html +0 -246
package/components/filter/demo/filter-search-demo.js +0 -135
package/components/filter/demo/filter-tags.html +0 -115
package/components/filter/demo/filter.html +0 -230
package/components/focus-trap/demo/focus-trap.html +0 -75
package/components/form/demo/form-demo.js +0 -105
package/components/form/demo/form-dialog-demo.js +0 -94
package/components/form/demo/form-panel-demo.js +0 -89
package/components/form/demo/form.html +0 -37
package/components/hierarchical-view/demo/hierarchical-view.html +0 -221
package/components/html-block/demo/html-block-code.html +0 -55
package/components/html-block/demo/html-block.html +0 -696
package/components/icons/demo/icon-color-override.js +0 -23
package/components/icons/demo/icon-custom.html +0 -112
package/components/icons/demo/icon-size-override.js +0 -24
package/components/icons/demo/icon.html +0 -52
package/components/inputs/demo/input-checkbox.html +0 -118
package/components/inputs/demo/input-color-palette.js +0 -67
package/components/inputs/demo/input-color.html +0 -110
package/components/inputs/demo/input-date-range.html +0 -114
package/components/inputs/demo/input-date-time-range.html +0 -128
package/components/inputs/demo/input-date-time.html +0 -100
package/components/inputs/demo/input-date.html +0 -81
package/components/inputs/demo/input-group.html +0 -56
package/components/inputs/demo/input-number.html +0 -136
package/components/inputs/demo/input-percent.html +0 -99
package/components/inputs/demo/input-radio-label-test.js +0 -45
package/components/inputs/demo/input-radio-solo-test.js +0 -47
package/components/inputs/demo/input-radio.html +0 -119
package/components/inputs/demo/input-search.html +0 -75
package/components/inputs/demo/input-select-test.js +0 -60
package/components/inputs/demo/input-select.html +0 -45
package/components/inputs/demo/input-text.html +0 -163
package/components/inputs/demo/input-textarea.html +0 -124
package/components/inputs/demo/input-time-range.html +0 -121
package/components/inputs/demo/input-time.html +0 -95
package/components/link/demo/link.html +0 -111
package/components/list/demo/demo-list-nav.js +0 -170
package/components/list/demo/demo-list-nested-iterations-helper.js +0 -168
package/components/list/demo/demo-list-nested-lazy-load.js +0 -133
package/components/list/demo/demo-list-nested.js +0 -291
package/components/list/demo/demo-list.js +0 -241
package/components/list/demo/list-color.html +0 -423
package/components/list/demo/list-demo-scenarios.js +0 -380
package/components/list/demo/list-drag-and-drop-position.js +0 -102
package/components/list/demo/list-drag-and-drop.html +0 -82
package/components/list/demo/list-expand-collapse.html +0 -136
package/components/list/demo/list-item-actions.html +0 -371
package/components/list/demo/list-item-custom.js +0 -204
package/components/list/demo/list-item-layouts.html +0 -331
package/components/list/demo/list-item-scroll.html +0 -122
package/components/list/demo/list-layout.html +0 -575
package/components/list/demo/list-nav.html +0 -110
package/components/list/demo/list-nested.html +0 -270
package/components/list/demo/list-selection.html +0 -301
package/components/list/demo/list.html +0 -319
package/components/loading-spinner/demo/loading-spinner-override.js +0 -34
package/components/loading-spinner/demo/loading-spinner.html +0 -63
package/components/menu/demo/checkbox-menu.html +0 -52
package/components/menu/demo/custom-menu-item.js +0 -37
package/components/menu/demo/custom-view.js +0 -63
package/components/menu/demo/menu.html +0 -211
package/components/menu/demo/radio-menu.html +0 -52
package/components/meter/demo/meter.html +0 -115
package/components/more-less/demo/more-less-test.js +0 -67
package/components/more-less/demo/more-less.html +0 -71
package/components/object-property-list/demo/object-property-list.html +0 -99
package/components/offscreen/demo/offscreen-demo.js +0 -16
package/components/offscreen/demo/offscreen.html +0 -44
package/components/overflow-group/demo/demo-overflow-group.js +0 -29
package/components/overflow-group/demo/overflow-group.html +0 -110
package/components/paging/demo/pager-load-more.html +0 -120
package/components/popover/demo/popover.html +0 -309
package/components/progress/demo/progress.html +0 -104
package/components/scroll-wrapper/demo/scroll-wrapper-test.js +0 -108
package/components/scroll-wrapper/demo/scroll-wrapper.html +0 -52
package/components/selection/demo/demo-selection.js +0 -35
package/components/selection/demo/selection.html +0 -198
package/components/skeleton/demo/skeleton-group-nested-test.js +0 -71
package/components/skeleton/demo/skeleton-group-test-wrapper.js +0 -18
package/components/skeleton/demo/skeleton-group-test.js +0 -91
package/components/skeleton/demo/skeleton-mixin.html +0 -78
package/components/skeleton/demo/skeleton-test-box.js +0 -34
package/components/skeleton/demo/skeleton-test-container.js +0 -45
package/components/skeleton/demo/skeleton-test-heading.js +0 -44
package/components/skeleton/demo/skeleton-test-link.js +0 -47
package/components/skeleton/demo/skeleton-test-paragraph.js +0 -54
package/components/skeleton/demo/skeleton-test-stack.js +0 -38
package/components/skeleton/demo/skeleton-test-width.js +0 -20
package/components/sorting/demo/sort.html +0 -37
package/components/status-indicator/demo/status-indicator.html +0 -99
package/components/switch/demo/switch.html +0 -95
package/components/table/demo/table-test.js +0 -271
package/components/table/demo/table.html +0 -107
package/components/tabs/demo/tab-custom.js +0 -39
package/components/tabs/demo/tabs-array.js +0 -43
package/components/tabs/demo/tabs.html +0 -558
package/components/tag-list/demo/tag-list.html +0 -117
package/components/tooltip/demo/tooltip.html +0 -275
package/components/typography/demo/typography.html +0 -93
package/components/view-switcher/demo/demo-table-view.js +0 -41
package/components/view-switcher/demo/view-switcher.html +0 -71
package/directives/animate/demo/animate-test.js +0 -98
package/directives/animate/demo/index.html +0 -23
package/helpers/demo/announce-test.js +0 -37
package/helpers/demo/announce.html +0 -19
package/helpers/demo/dismissible-test.js +0 -66
package/helpers/demo/dismissible.html +0 -38
package/helpers/demo/gestures.html +0 -58
package/helpers/demo/prism.html +0 -694
package/helpers/demo/template-tags.html +0 -118
package/mixins/arrow-keys/demo/arrow-keys-mixin.html +0 -29
package/mixins/arrow-keys/demo/arrow-keys-test.js +0 -38
package/mixins/async-container/demo/async-container.html +0 -109
package/mixins/async-container/demo/async-container.js +0 -27
package/mixins/async-container/demo/async-item.js +0 -80
package/mixins/labelled/demo/labelled-mixin.html +0 -90
package/mixins/localize/demo/localize-mixin-greeting.js +0 -39
package/mixins/localize/demo/localize-mixin-mission.js +0 -25
package/mixins/localize/demo/localize-mixin.html +0 -28
package/templates/primary-secondary/demo/form.html +0 -55
package/templates/primary-secondary/demo/index.html +0 -27
package/templates/primary-secondary/demo/integration.html +0 -457
package/templates/primary-secondary/demo/overflow-hidden.html +0 -22
package/templates/primary-secondary/demo/width-type-normal.html +0 -26

package/components/tag-list/demo/tag-list.html DELETED Viewed

@@ -1,117 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta charset="UTF-8">
-		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-		<script type="module">
-			import '../../demo/demo-page.js';
-			import '../tag-list.js';
-			import '../tag-list-item.js';
-			import '../test/tag-list-item-mixin-consumer.js';
-		</script>
-		<style>
-			.actions {
-				margin-bottom: 1rem;
-			}
-		</style>
-	</head>
-	<body unresolved>
-		<d2l-demo-page page-title="d2l-tag-list">
-			<h2>Basic Tag List</h2>
-			<div class="actions">
-				<button id="add">add tag (first)</button>
-				<button id="remove">remove tag (first)</button>
-			</div>
-			<script>
-				let addIndex = 0;
-				document.querySelector('#add').addEventListener('click', () => {
-					const tag = document.createElement('d2l-tag-list-item');
-					tag.text = `Added Tag ${++addIndex}`;
-					document.querySelector('d2l-tag-list').insertBefore(tag, document.querySelector('d2l-tag-list').children[0]);
-				});
-				document.querySelector('#remove').addEventListener('click', () => {
-					const children = document.querySelector('d2l-tag-list').children;
-					if (children.length === 0) return;
-					document.querySelector('d2l-tag-list').removeChild(children[0]);
-				});
-			</script>
-			<d2l-demo-snippet full-width>
-				<d2l-tag-list description="A bunch of example tags">
-					<d2l-tag-list-item text="Example 1 - much much much much much much much much longer"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example 2"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example 3"></d2l-tag-list-item>
-					<d2l-tag-list-item-mixin-consumer name="Custom Tag List Item"></d2l-tag-list-item-mixin-consumer>
-					<d2l-tag-list-item text="Example 5"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example 6" description="this is a description"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example 7"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example 8"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example 9"></d2l-tag-list-item>
-				</d2l-tag-list>
-			</d2l-demo-snippet>
-			<h2>Clearable Tag List</h2>
-			<d2l-demo-snippet full-width>
-				<d2l-tag-list description="A bunch of example tags" clearable>
-					<d2l-tag-list-item key="example-1" text="Example 1"></d2l-tag-list-item>
-					<d2l-tag-list-item key="example-2" text="Example 2 - much much much much much much much much longer"></d2l-tag-list-item>
-					<d2l-tag-list-item key="example-3" text="Example 3"></d2l-tag-list-item>
-					<d2l-tag-list-item-mixin-consumer key="custom" name="Custom Tag List Item"></d2l-tag-list-item-mixin-consumer>
-					<d2l-tag-list-item key="example-5" text="Example 5"></d2l-tag-list-item>
-					<d2l-tag-list-item key="example-6" text="Example 6" description="this is a description"></d2l-tag-list-item>
-					<d2l-tag-list-item key="example-7" text="Example 7"></d2l-tag-list-item>
-					<d2l-tag-list-item key="example-8" text="Example 8"></d2l-tag-list-item>
-					<d2l-tag-list-item key="example-9" text="Example 9"></d2l-tag-list-item>
-				</d2l-tag-list>
-				<script type="module">
-					import { getNextFocusable } from '../../../helpers/focus.js';
-					document.addEventListener('d2l-tag-list-item-clear', (e) => {
-						console.log(`d2l-tag-list-item-clear event dispatched. Key: ${e.target.key}; Value: ${e.target.text}`);
-						e.target.parentNode.removeChild(e.target);
-					});
-					document.addEventListener('d2l-tag-list-clear', (e) => {
-						console.log('d2l-tag-list-clear event dispatched.', e.target);
-						const nextFocusable = getNextFocusable(e.target, true, true, true);
-						[...e.target.children].forEach(tag => {
-							e.target.removeChild(tag);
-						});
-						// consumer must move focus someplace logical
-						nextFocusable?.focus();
-					});
-				</script>
-			</d2l-demo-snippet>
-			<h2>Tag List with Interactive</h2>
-			<d2l-demo-snippet full-width>
-				<div grid>
-					<d2l-tag-list description="A bunch of example tags" clearable>
-						<d2l-tag-list-item text="Example Tag"></d2l-tag-list-item>
-						<d2l-tag-list-item text="Longer Example Tag - much much much much much longer"></d2l-tag-list-item>
-						<d2l-tag-list-item text="Another Example Tag"></d2l-tag-list-item>
-						<d2l-tag-list-item-mixin-consumer name="Custom Tag List Item"></d2l-tag-list-item-mixin-consumer>
-						<d2l-tag-list-item text="Example Tag 5"></d2l-tag-list-item>
-						<d2l-tag-list-item text="Example Tag 6"></d2l-tag-list-item>
-						<d2l-tag-list-item text="Example Tag 7"></d2l-tag-list-item>
-					</d2l-tag-list>
-				</div>
-			</d2l-demo-snippet>
-			<h2>Tag List - Custom Tooltip Description</h2>
-			<d2l-demo-snippet full-width>
-				<d2l-tag-list description="A bunch of example tags">
-					<d2l-tag-list-item text="Longer Example Tag - much much much much much longer" description="display text and description value when truncated"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example Tag 5" description="custom tooltip text - display description only when not truncated"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Truncated list item without a custom tooltip description"></d2l-tag-list-item>
-					<d2l-tag-list-item text="No tooltip"></d2l-tag-list-item>
-				</d2l-tag-list>
-			</d2l-demo-snippet>
-		</d2l-demo-page>
-	</body>
-</html>

package/components/tooltip/demo/tooltip.html DELETED Viewed

@@ -1,275 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-	<meta charset="UTF-8">
-	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-	<script type="module">
-		import '../../demo/demo-page.js';
-		import '../../button/button.js';
-		import '../../colors/colors.js';
-		import '../../icons/icon-custom.js';
-		import '../../inputs/input-text.js';
-		import '../../link/link.js';
-		import '../tooltip.js';
-		import '../tooltip-help.js';
-	</script>
-	<style>
-		.boundary {
-			background-color: var(--d2l-color-citrine);
-			box-sizing: border-box;
-			display: inline-block;
-			height: 175px;
-			padding-left: 150px;
-			padding-top: 60px;
-			position: relative;
-			width: 350px;
-		}
-		.bounded {
-			border: 1px solid #cdd5dc;
-			border-radius: 6px;
-			height: 200px;
-			overflow: hidden;
-			padding: 20px;
-			width: 200px;
-		}
-		.truncated {
-			border: 1px solid #cdd5dc;
-			border-radius: 6px;
-			height: 200px;
-			padding: 20px;
-			width: 200px;
-		}
-		.truncated d2l-button {
-			margin-bottom: 20px;
-			max-width: 100%;
-		}
-		.truncated d2l-button span {
-			display: block;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-		.truncated d2l-link {
-			display: flex;
-		}
-		.dark-background {
-			background-color: black;
-			padding: 20px;
-		}
-	</style>
-</head>
-<body unresolved>
-	<d2l-demo-page page-title="d2l-tooltip">
-		<h2>Tooltip (info)</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-button id="tooltip-preview">Preview</d2l-button>
-				<d2l-tooltip for="tooltip-preview">
-					Tooltip for the Preview button.
-				</d2l-tooltip>
-				<d2l-button id="tooltip-settings">Settings</d2l-button>
-				<d2l-tooltip for="tooltip-settings">
-					Tooltip for the Settings button.
-				</d2l-tooltip>
-			</template>
-		</d2l-demo-snippet>
-		<h2>Tooltip (error)</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-input-text placeholder="Hover for Error" id="tooltip-error" aria-invalid="true" label="label"></d2l-input-text>
-				<d2l-tooltip for="tooltip-error" state="error" align="start" offset="10">
-					Your error message will display here
-				</d2l-tooltip>
-			</template>
-		</d2l-demo-snippet>
-		<h2>Tooltip (position)</h2>
-		<d2l-demo-snippet>
-			<template>
-				<div>
-					<select id="position">
-						<option value="bottom" selected>bottom</option>
-						<option value="left">left</option>
-						<option value="right">right</option>
-						<option value="top">top</option>
-					</select>
-					<select id="align">
-						<option value="center" selected>center</option>
-						<option value="start">start</option>
-						<option value="end">end</option>
-					</select>
-				</div>
-				<div style="text-align: center;">
-					<d2l-button id="tooltip-position">Tooltip Position</d2l-button>
-					<d2l-tooltip for="tooltip-position">
-						This tooltip will be positioned according to the above selections for location and alignment.
-					</d2l-tooltip>
-				</div>
-				<script data-demo-hide>
-					const demo = document.currentScript.parentNode;
-					demo.querySelector('#position').addEventListener('change', e => {
-						demo.querySelector('d2l-tooltip').setAttribute('position', e.target.value);
-					});
-					demo.querySelector('#align').addEventListener('change', e => {
-						demo.querySelector('d2l-tooltip').align = (e.target.value !== 'center' ? e.target.value : undefined);
-					});
-				</script>
-			</template>
-		</d2l-demo-snippet>
-		<h2>Tooltip (boundary)</h2>
-		<d2l-demo-snippet>
-			<template>
-				<div class="boundary">
-					<d2l-button id="tooltip-boundary">Tooltip boundary</d2l-button>
-					<d2l-tooltip for="tooltip-boundary"
-						boundary="{&quot;top&quot;:0, &quot;bottom&quot;:0, &quot;left&quot;:0, &quot;right&quot;:0}">
-						This tooltip will not expand beyond its boundaries unless it is impossible to fit it inside
-					</d2l-tooltip>
-				</div>
-			</template>
-		</d2l-demo-snippet>
-		<h2>Tooltip (delay)</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-button id="tooltip-delay">Hover and Wait</d2l-button>
-				<d2l-tooltip for="tooltip-delay" delay="1000">
-					Your delayed message will display here
-				</d2l-tooltip>
-			</template>
-		</d2l-demo-snippet>
-		<h2>Tooltip (force-show)</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-button id="tooltip-force-show">Always visible</d2l-button>
-				<d2l-tooltip for="tooltip-force-show" force-show>
-					Always visible message
-				</d2l-tooltip>
-			</template>
-		</d2l-demo-snippet>
-		<h2>Tooltip (announced)</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-button id="tooltip-announced">Announced</d2l-button>
-				<d2l-tooltip for="tooltip-announced" announced>
-					Some information
-				</d2l-tooltip>
-			</template>
-		</d2l-demo-snippet>
-		<h2>Tooltip (bounding container)</h2>
-		<d2l-demo-snippet>
-			<template>
-				<div class="bounded">
-					<d2l-button id="tooltip-bounded">Bounded Tooltip</d2l-button>
-					<d2l-tooltip for="tooltip-bounded">
-						A tooltip message inside of a container that hides overflow.
-					</d2l-tooltip>
-				</div>
-			</template>
-		</d2l-demo-snippet>
-		<h2>Tooltip (only show if truncating)</h2>
-		<d2l-demo-snippet>
-			<template>
-				<div class="truncated">
-					<d2l-button id="tooltip-short"><span>Short Tooltip</span></d2l-button>
-					<d2l-tooltip for="tooltip-short" show-truncated-only>
-						This tooltip will not show.
-					</d2l-tooltip>
-					<d2l-button id="tooltip-long"><span>Very Very Very Very Long Tooltip</span></d2l-button>
-					<d2l-tooltip for="tooltip-long" show-truncated-only>
-						Very Very Very Very Long Tooltip - this tooltip will show because the text is truncating.
-					</d2l-tooltip>
-					<d2l-link id="link-short" href="https://www.d2l.com" lines="1">Short Text</d2l-link>
-					<d2l-tooltip for="link-short" show-truncated-only>
-						This tooltip will not show.
-					</d2l-tooltip>
-					<d2l-link id="link-long" href="https://www.d2l.com" lines="1">Very Very Very Very Long Text</d2l-link>
-					<d2l-tooltip for="link-long" show-truncated-only>
-						Very Very Very Very Long Text - this tooltip will show because the text is truncating.
-					</d2l-tooltip>
-				</div>
-			</template>
-		</d2l-demo-snippet>
-		<h2>Tooltip (dark background)</h2>
-		<d2l-demo-snippet>
-			<template>
-				<div class="dark-background">
-					<d2l-button id="tooltip-dark-background">Dark Background</d2l-button>
-					<d2l-tooltip for="tooltip-dark-background">
-						All tooltips have an outline.
-					</d2l-tooltip>
-				</div>
-			</template>
-		</d2l-demo-snippet>
-		<h2>Help Tooltip</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-tooltip-help text="Helpful label">Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
-				<p class="d2l-body-small" style="padding-top: 20px;">
-					This is some sample text.
-					<d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
-				</p>
-				<p class="d2l-body-compact">
-					This is some sample text.
-					<d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
-				</p>
-				<p class="d2l-body-compact">
-					Using an icon.
-					<d2l-tooltip-help icon="tier1:edit" text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
-				</p>
-				<p class="d2l-body-compact">
-					Using a custom icon.
-					<d2l-tooltip-help text="Helpful label" inherit-font-style>
-						Contents should elaborate on the label (be short and concise)
-						<d2l-icon-custom slot="icon">
-							<svg xmlns="http://www.w3.org/2000/svg" mirror-in-rtl="true">
-		 						<path fill="#494c4e" d="M18 12v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-5a1 1 0 0 1 2 0v4h14v-4a1 1 0 0 1 2 0z"/>
-		 						<path fill="#494c4e" d="M13.85 3.15l-2.99-3A.507.507 0 0 0 10.5 0H5.4A1.417 1.417 0 0 0 4 1.43v11.14A1.417 1.417 0 0 0 5.4 14h7.2a1.417 1.417 0 0 0 1.4-1.43V3.5a.47.47 0 0 0-.15-.35zM7 2h1a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2zm4 10H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zm0-4H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"/>
-		 					</svg>
-						</d2l-icon-custom>
-					</d2l-tooltip-help>
-				</p>
-				<p class="d2l-body-compact" style="max-width: 100px;">
-					Wrapped:
-					<d2l-tooltip-help text="Due: Jan 20, 2026">Other due date information</d2l-tooltip-help>
-				</p>
-			</template>
-		</d2l-demo-snippet>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-button id="toggle" disabled-tooltip="This tooltip shows if button is disabled, but only after refocusing">Toggle Disable</d2l-button>
-				<script>
-					document.querySelector('#toggle').addEventListener('click', e => e.target.disabled = !e.target.disabled);
-					document.addEventListener('d2l-tooltip-show', e => console.log('d2l-tooltip-show', e.target));
-					document.addEventListener('d2l-tooltip-hide', e => console.log('d2l-tooltip-hide', e.target));
-				</script>
-			</template>
-		</d2l-demo-snippet>
-	</d2l-demo-page>
-</body>
-</html>

package/components/typography/demo/typography.html DELETED Viewed

@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta charset="UTF-8">
-		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-		<script type="module">
-			import '../../demo/demo-page.js';
-		</script>
-	</head>
-	<body unresolved>
-		<d2l-demo-page page-title="d2l-typography">
-			<h2>Body</h2>
-			<d2l-demo-snippet>
-				<div class="d2l-body-standard">Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.</div>
-			</d2l-demo-snippet>
-			<h2>Body Compact</h2>
-			<d2l-demo-snippet>
-				<div class="d2l-body-compact">Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.</div>
-			</d2l-demo-snippet>
-			<h2>Body Small</h2>
-			<d2l-demo-snippet>
-				<div class="d2l-body-small">Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.</div>
-			</d2l-demo-snippet>
-			<h2>Paragraph</h2>
-			<d2l-demo-snippet>
-				<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
-				<p>The five boxing wizards jump quickly.</p>
-				<p>The wizard quickly jinxed the gnomes before they vaporized.</p>
-			</d2l-demo-snippet>
-			<h2>Headings</h2>
-			<d2l-demo-snippet>
-				<h3 class="d2l-heading-1">Heading 1</h3>
-				<h3 class="d2l-heading-2">Heading 2</h3>
-				<h3 class="d2l-heading-3">Heading 3</h3>
-				<h3 class="d2l-heading-4">Heading 4</h3>
-			</d2l-demo-snippet>
-			<h2>Labels</h2>
-			<d2l-demo-snippet>
-				<label class="d2l-label-text">Fancy Shmancy Label</label>
-			</d2l-demo-snippet>
-			<h2>Blockquote</h2>
-			<d2l-demo-snippet>
-				<blockquote class="d2l-blockquote">Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.</blockquote>
-			</d2l-demo-snippet>
-			<h2>BC Sans</h2>
-			<div class="d2l-body-small">Showing a small selection of glyphs from Canadian Aboriginal blocks known to be different. For a detailed comparison, see the <a href="https://github.com/Brightspace/fonts-lib">fonts-lib</a>'s demo.</div>
-			<d2l-demo-snippet>
-				<div class="d2l-body-standard" style="font-family: BC Sans, sans-serif;">
-					<p>Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
-					<p style="font-weight: 300;">ᐂ ᐪ ᒤ ᔆ ᔌ ᔕ ᔤ ᔧ ᕯ ᗯ ᘏ ᘗ ᘩ ᘨ ᣱ</p>
-					<p>ᐂ ᐪ ᒤ ᔆ ᔌ ᔕ ᔤ ᔧ ᕯ ᗯ ᘏ ᘗ ᘩ ᘨ ᣱ</p>
-					<p style="font-weight: 700;">ᐂ ᐪ ᒤ ᔆ ᔌ ᔕ ᔤ ᔧ ᕯ ᗯ ᘏ ᘗ ᘩ ᘨ ᣱ</p>
-					<p style="font-style: italic; font-weight: 300;">ᐂ ᐪ ᒤ ᔆ ᔌ ᔕ ᔤ ᔧ ᕯ ᗯ ᘏ ᘗ ᘩ ᘨ ᣱ</p>
-					<p style="font-style: italic;">ᐂ ᐪ ᒤ ᔆ ᔌ ᔕ ᔤ ᔧ ᕯ ᗯ ᘏ ᘗ ᘩ ᘨ ᣱ</p>
-					<p style="font-style: italic; font-weight: 700;">ᐂ ᐪ ᒤ ᔆ ᔌ ᔕ ᔤ ᔧ ᕯ ᗯ ᘏ ᘗ ᘩ ᘨ ᣱ</p>
-				</div>
-			</d2l-demo-snippet>
-			<h2>Noto Sans Thai</h2>
-			<div class="d2l-body-small">Showing a small selection of glyphs from Thai script known to require significantly different rendering characteristics from Latin script. For a detailed comparison, see the <a href="https://github.com/Brightspace/fonts-lib">fonts-lib</a>'s demo.</div>
-			<d2l-demo-snippet>
-				<div class="d2l-body-standard" style='font-family: "Noto Sans Thai", system-ui, Tahoma;'>
-					<p>Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
-					<p>ฯ ๆ ๎ ์ ็ ่ ้ ๊ ๋ ญ ฎ ฏ ฐ ํ ะ ั า ๅ ำ ิ ี ึ ื ุ ู เ แ โ ใ ไ พํุู่้</p>
-					<p style="font-weight: 700;">ฯ ๆ ๎ ์ ็ ่ ้ ๊ ๋ ญ ฎ ฏ ฐ ํ ะ ั า ๅ ำ ิ ี ึ ื ุ ู เ แ โ ใ ไ พํุู่้</p>
-					<p style="font-style: italic;">ฯ ๆ ๎ ์ ็ ่ ้ ๊ ๋ ญ ฎ ฏ ฐ ํ ะ ั า ๅ ำ ิ ี ึ ื ุ ู เ แ โ ใ ไ พํุู่้</p>
-					<p style="font-style: italic; font-weight: 700;">ฯ ๆ ๎ ์ ็ ่ ้ ๊ ๋ ญ ฎ ฏ ฐ ํ ะ ั า ๅ ำ ิ ี ึ ื ุ ู เ แ โ ใ ไ พํุู่้</p>
-				</div>
-			</d2l-demo-snippet>
-		</d2l-demo-page>
-	</body>
-</html>

package/components/view-switcher/demo/demo-table-view.js DELETED Viewed

@@ -1,41 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { tableStyles } from '../../table/table-wrapper.js';
-class TableView extends LitElement {
-	static get styles() {
-		return [tableStyles, css`
-			:host([hidden]) {
-				display: none;
-			}
-		`];
-	}
-	render() {
-		return html`
-			<d2l-table-wrapper>
-				<table class="d2l-table">
-					<thead>
-					<tr>
-						<th>Name</th>
-						<th>Section</th>
-						<th>Info</th>
-					</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<th>Jane Doe</th>
-							<td>Section 1</td>
-							<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra felis sit amet magna eleifend lacinia. Duis faucibus commodo tellus.</td>
-						</tr>
-						<tr>
-							<th>John Smith</th>
-							<td>Section 2</td>
-							<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra felis sit amet magna eleifend lacinia. Duis faucibus commodo tellus.</td>
-						</tr>
-					</tbody>
-				</table>
-			</d2l-table-wrapper>
-		`;
-	}
-}
-customElements.define('d2l-demo-table-view', TableView);

package/components/view-switcher/demo/view-switcher.html DELETED Viewed

@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta charset="UTF-8">
-		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-		<script type="module">
-			import '../../demo/demo-page.js';
-			import '../view-switcher.js';
-			import '../view-switcher-button.js';
-			import '../../list/list-item-content.js';
-			import '../../list/list-item.js';
-			import './demo-table-view.js';
-			import { listLayouts } from '../../list/list.js';
-			window.listLayouts = listLayouts;
-		</script>
-	</head>
-	<body unresolved>
-		<d2l-demo-page page-title="d2l-view-switcher">
-			<h2>View Switcher</h2>
-			<d2l-demo-snippet>
-				<d2l-view-switcher label="Layout Options">
-					<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
-					<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
-					<d2l-view-switcher-button key="table" text="Table"></d2l-view-switcher-button>
-				</d2l-view-switcher>
-				<br><br>
-				<d2l-list layout="tiles">
-					<d2l-list-item label="item 1">
-						<d2l-list-item-content>
-							<div>Jane Doe</div>
-							<div slot="secondary">Section 1</div>
-							<div slot="supporting-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra felis sit amet magna eleifend lacinia. Duis faucibus commodo tellus.</div>
-						</d2l-list-item-content>
-					</d2l-list-item>
-					<d2l-list-item label="item 2">
-						<d2l-list-item-content>
-							<div>John Smith</div>
-							<div slot="secondary">Section 2</div>
-							<div slot="supporting-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra felis sit amet magna eleifend lacinia. Duis faucibus commodo tellus.</div>
-						</d2l-list-item-content>
-					</d2l-list-item>
-				</d2l-list>
-				<d2l-demo-table-view hidden></d2l-demo-table-view>
-				<script data-demo-hide>
-					document.querySelector('d2l-view-switcher').addEventListener('d2l-view-switcher-select', e => {
-						const list = document.querySelector('d2l-list');
-						const table = document.querySelector('d2l-demo-table-view');
-						if (e.detail.key === 'table') {
-							table.removeAttribute('hidden');
-							list.setAttribute('hidden', '');
-						} else {
-							table.setAttribute('hidden', '');
-							list.removeAttribute('hidden');
-							list.layout = (e.detail.key === 'tiles' ? window.listLayouts.tiles : window.listLayouts.list);
-						}
-					});
-				</script>
-			</d2l-demo-snippet>
-		</d2l-demo-page>
-	</body>
-</html>