@brightspace-ui/core 2.98.1 → 2.98.3

package/components/inputs/input-date.js

@@ -14,6 +14,7 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 

package/components/inputs/input-time.js

@@ -15,6 +15,7 @@ import { inputLabelStyles } from './input-label-styles.js';
 import { inputStyles } from './input-styles.js';
 import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
+import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const MIDNIGHT = new Date(2020, 0, 1, 0, 0, 0);

package/components/tabs/demo/tabs.html

@@ -7,6 +7,10 @@
 		<script type="module">
 			import '../../demo/demo-page.js';
 			import '../../button/button-subtle.js';
+			import '../../dropdown/dropdown-button-subtle.js';
+			import '../../dropdown/dropdown-menu.js';
+			import '../../menu/menu.js';
+			import '../../menu/menu-item.js';
 			import '../tabs.js';
 			import '../tab-panel.js';
 		</script>
@@ -17,6 +21,20 @@
 
 			<h2>Tabs</h2>
 
+			<d2l-demo-snippet>
+				<template>
+					<d2l-tabs>
+						<d2l-tab-panel text="Biology">Tab content for Biology</d2l-tab-panel>
+						<d2l-tab-panel text="Chemistry">Tab content for Chemistry</d2l-tab-panel>
+						<d2l-tab-panel text="Earth &amp; Planetary Sciences">Tab content for Earth &amp; Planetary Sciences</d2l-tab-panel>
+						<d2l-tab-panel text="Physics">Tab content for Physics</d2l-tab-panel>
+						<d2l-tab-panel text="Math">Tab content for Math</d2l-tab-panel>
+					</d2l-tabs>
+				</template>
+			</d2l-demo-snippet>
+
+			<h3>Tabs (with slot)</h3>
+
 			<div style="margin-bottom: 30px;">
 				<d2l-button-subtle id="add" text="Add"></d2l-button-subtle>
 				<d2l-button-subtle id="add-selected" text="Add Selected"></d2l-button-subtle>
@@ -24,45 +42,29 @@
 			</div>
 			<script>
 				let newPanelId = 0;
-				const addPanel = selected => {
+				const addPanel = (selected, tabs) => {
 					newPanelId += 1;
 					const panel = document.createElement('d2l-tab-panel');
 					panel.selected = selected;
 					panel.text = `New Panel ${newPanelId}`;
 					panel.textContent = `Content for new panel ${newPanelId}`;
-					const tabs = document.querySelector('d2l-tabs');
 					const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
 					if (panels.length < 2) tabs.appendChild(panel);
 					else tabs.insertBefore(panel, panels[1]);
 				};
-				
-				document.querySelector('#add').addEventListener('click', () => addPanel(false));
-				document.querySelector('#add-selected').addEventListener('click', () => addPanel(true));
-
-				document.querySelector('#remove').addEventListener('click', () => {
-					const tabs = document.querySelector('d2l-tabs');
+				const removePanel = (tabs) => {
 					const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
 					if (panels.length === 0) return;
 					if (panels.length === 1) tabs.removeChild(panels[0]);
 					else tabs.removeChild(panels[1]);
-				});
-			</script>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-tabs>
-						<d2l-tab-panel text="Biology">Tab content for Biology</d2l-tab-panel>
-						<d2l-tab-panel text="Chemistry">Tab content for Chemistry</d2l-tab-panel>
-						<d2l-tab-panel text="Earth &amp; Planetary Sciences">Tab content for Earth &amp; Planetary Sciences</d2l-tab-panel>
-						<d2l-tab-panel text="Physics">Tab content for Physics</d2l-tab-panel>
-						<d2l-tab-panel text="Math">Tab content for Math</d2l-tab-panel>
-					</d2l-tabs>
-				</template>
-			</d2l-demo-snippet>
+				};
 
-			<h3>Tabs (with slot)</h3>
+				document.querySelector('#add').addEventListener('click', () => addPanel(false, document.querySelector('#withSlot').querySelector('d2l-tabs')));
+				document.querySelector('#add-selected').addEventListener('click', () => addPanel(true, document.querySelector('#withSlot').querySelector('d2l-tabs')));
+				document.querySelector('#remove').addEventListener('click', () => removePanel(document.querySelector('#withSlot').querySelector('d2l-tabs')));
+			</script>
 
-			<d2l-demo-snippet>
+			<d2l-demo-snippet id="withSlot">
 				<template>
 					<d2l-tabs>
 						<d2l-tab-panel text="Biology">Tab content for Biology</d2l-tab-panel>
@@ -70,7 +72,18 @@
 						<d2l-tab-panel text="Earth Sciences">Tab content for Earth Sciences</d2l-tab-panel>
 						<d2l-tab-panel text="Physics">Tab content for Physics</d2l-tab-panel>
 						<d2l-tab-panel text="Math">Tab content for Math</d2l-tab-panel>
-						<d2l-button-subtle slot="ext" text="Search" icon="tier1:search"></d2l-button-subtle>
+						<d2l-dropdown-button-subtle slot="ext" text="Explore Topics">
+							<d2l-dropdown-menu>
+								<d2l-menu label="Astronomy">
+									<d2l-menu-item text="Introduction"></d2l-menu-item>
+									<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
+									<d2l-menu-item text="The Solar System"></d2l-menu-item>
+									<d2l-menu-item text="Stars &amp; Galaxies"></d2l-menu-item>
+									<d2l-menu-item text="The Night Sky"></d2l-menu-item>
+									<d2l-menu-item text="The Universe"></d2l-menu-item>
+								</d2l-menu>
+							</d2l-dropdown-menu>
+						</d2l-dropdown-button-subtle>
 					</d2l-tabs>
 				</template>
 			</d2l-demo-snippet>

package/components/tabs/tabs.js

@@ -96,7 +96,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(LitElement))) {
 				display: flex;
 				max-height: 60px;
 				opacity: 1;
-				transform: translateY(0);
+				transform: none;
 			}
 			.d2l-tabs-container {
 				box-sizing: border-box;

package/package.json

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