@brightspace-ui/core 1.233.0 → 1.233.4

package/components/dialog/dialog-mixin.js

@@ -197,7 +197,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		let preferredHeight = 0;
 
 		const header = this.shadowRoot.querySelector('.d2l-dialog-header');
-		if (header) preferredHeight += header.scrollHeight;
+		if (header) preferredHeight += Math.ceil(header.getBoundingClientRect().height);
 
 		const contentOuter = this.shadowRoot.querySelector('.d2l-dialog-content');
 		const content = this.shadowRoot.querySelector('.d2l-dialog-content > div');
@@ -210,7 +210,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		}
 
 		const footer = this.shadowRoot.querySelector('.d2l-dialog-footer');
-		if (footer) preferredHeight += footer.scrollHeight;
+		if (footer) preferredHeight += Math.ceil(footer.getBoundingClientRect().height);
 
 		const height = (preferredHeight < availableHeight ? preferredHeight : availableHeight);
 		return height;

package/components/dropdown/README.md

@@ -1,20 +1,11 @@
 # Dropdowns
 A Dropdown is a button that opens a floating container to offer menu items or other content.
 
-<!-- docs: demo align:flex-start autoSize:false size:medium -->
+<!-- docs: demo align:flex-start autoOpen:true autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
   import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
-
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-    setTimeout(() => {
-      var dropdown = document.querySelector('d2l-dropdown-button');
-      dropdown.toggleOpen();
-    }, 1000);
-  });
 </script>
 <d2l-dropdown-button text="Open!">
   <d2l-dropdown-content>

package/components/inputs/docs/input-date-time.md

@@ -2,21 +2,11 @@
 
 Use date and time inputs to set dates and times in forms. They are available as separate inputs (date or time) or as a combined date & time input, and each of them is also available as a range.
 
-<!-- docs: demo align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo align:flex-start autoOpen:true autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date.js';
   import '@brightspace-ui/core/components/inputs/input-time.js';
-
-  window.addEventListener('load', function () {
-    var demoElem = document.querySelector('#demo-element');
-    if (!demoElem.hasAttribute('data-first-load')) return;
-
-    setTimeout(function() {
-      var input = document.querySelector('d2l-input-date');
-      input.opened = true;
-    }, 1000);
-  });
 </script>
 <d2l-input-date label="Date Input"></d2l-input-date>
 <d2l-input-time label="Time Input"></d2l-input-time>
@@ -45,7 +35,7 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
 ![example screenshot of date input](../screenshots/date.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live name:d2l-input-date align:flex-start autoOpen:true autoSize:false size:xlarge -->
+<!-- docs: demo live name:d2l-input-date align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date.js';
@@ -95,7 +85,7 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
 ![example screenshot of date range input](../screenshots/date-range.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live name:d2l-input-date-range align:flex-start autoOpen:true autoSize:false size:xlarge -->
+<!-- docs: demo live name:d2l-input-date-range align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date-range.js';
@@ -151,7 +141,7 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
 ![example screenshot of time input](../screenshots/time.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live name:d2l-input-time align:flex-start autoOpen:true autoSize:false size:large -->
+<!-- docs: demo live name:d2l-input-time align:flex-start autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-time.js';
@@ -201,7 +191,7 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
 ![example screenshot of time range input](../screenshots/time-range.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live name:d2l-input-time-range align:flex-start autoOpen:true autoSize:false size:large -->
+<!-- docs: demo live name:d2l-input-time-range align:flex-start autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-time-range.js';
@@ -253,7 +243,7 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
 ![example screenshot of date input](../screenshots/date-time.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live name:d2l-input-date-time align:flex-start autoOpen:true autoSize:false size:xlarge -->
+<!-- docs: demo live name:d2l-input-date-time align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date-time.js';
@@ -304,7 +294,7 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
 ![example screenshot of date-time range input](../screenshots/date-time-range.gif?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo live name:d2l-input-date-time-range align:flex-start autoOpen:true autoSize:false size:xlarge -->
+<!-- docs: demo live name:d2l-input-date-time-range align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date-time-range.js';

package/components/list/list-item-mixin.js

@@ -73,6 +73,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			_breakpoint: { type: Number },
 			_displayKeyboardTooltip: { type: Boolean },
 			_dropdownOpen: { type: Boolean, attribute: '_dropdown-open', reflect: true },
+			_fullscreenWithin: { type: Boolean, attribute: '_fullscreen-within', reflect: true },
 			_hoveringPrimaryAction: { type: Boolean },
 			_focusing: { type: Boolean },
 			_focusingPrimaryAction: { type: Boolean },
@@ -92,7 +93,8 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				display: none;
 			}
 			:host([_tooltip-showing]),
-			:host([_dropdown-open]) {
+			:host([_dropdown-open]),
+			:host([_fullscreen-within]) {
 				z-index: 10;
 			}
 			:host(:first-child) d2l-list-item-generic-layout[data-separators="between"] {
@@ -275,6 +277,10 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				width: 100%;
 				z-index: 5;
 			}
+			:host([_fullscreen-within]) .d2l-list-item-active-border,
+			:host([_fullscreen-within]) d2l-list-item-generic-layout.d2l-focusing + .d2l-list-item-active-border {
+				display: none;
+			}
 			d2l-tooltip > div {
 				font-weight: 700;
 			}
@@ -298,6 +304,8 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		this._breakpoint = 0;
 		this._contentId = getUniqueId();
 		this._displayKeyboardTooltip = false;
+		this._fullscreenWithin = false;
+		this._fullscreenWithinCount = 0;
 	}
 
 	get breakpoints() {
@@ -421,6 +429,12 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		this._focusingPrimaryAction = false;
 	}
 
+	_onFullscreenWithin(e) {
+		if (e.detail.state) this._fullscreenWithinCount += 1;
+		else this._fullscreenWithinCount -= 1;
+		this._fullscreenWithin = (this._fullscreenWithinCount > 0);
+	}
+
 	_onMouseEnter() {
 		this._hovering = true;
 	}
@@ -460,6 +474,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			<d2l-list-item-generic-layout
 				@focusin="${this._onFocusIn}"
 				@focusout="${this._onFocusOut}"
+				@d2l-fullscreen-within="${this._onFullscreenWithin}"
 				class="${classMap(classes)}"
 				data-breakpoint="${this._breakpoint}"
 				data-separators="${ifDefined(this._separators)}"

package/package.json

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

package/templates/primary-secondary/demo/index.html

@@ -7,6 +7,8 @@
 		<script type="module">
 			import '../../../components/demo/demo-page.js';
 			import '../primary-secondary.js';
+			import '../../../components/button/button.js';
+			import '../../../components/dialog/dialog-fullscreen.js';
 		</script>
 	</head>
 	<body>
@@ -17,8 +19,28 @@
 				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo.
 			</div>
 			<div slot="secondary">
+					<d2l-button id="open">Show Dialog</d2l-button>
+					<d2l-dialog-fullscreen id="dialogFullscreen" title-text="Fullscreen Title">
+						<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+						<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+						<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+						<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+						<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
+						<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+					</d2l-dialog-fullscreen>
+
+					<script>
+						document.querySelector('#open').addEventListener('click', () => {
+							document.querySelector('#dialogFullscreen').opened = true;
+						});
+						document.querySelector('#dialogFullscreen').addEventListener('d2l-dialog-close', (e) => {
+							console.log('confirm action:', e.detail.action);
+						});
+					</script>
 				<p>I'm in the <b>secondary</b> slot of the <b>d2l-template-primary-secondary</b> component!</p>
-				Quisque justo risus, elementum quis condimentum vitae, venenatis sit amet nisl. Vivamus interdum pretium libero dictum eleifend. Donec eros tortor, facilisis eget maximus in, malesuada a magna. Nulla ac felis turpis. Donec pellentesque est in rhoncus tempus. Proin ac purus porttitor, interdum est a, venenatis mi. Maecenas nunc nulla, viverra ut ornare id, luctus eu nulla. Pellentesque massa turpis, porta ut tincidunt ut, ullamcorper vitae urna. Nam congue euismod placerat. Vestibulum aliquet, metus vitae viverra posuere, lacus urna hendrerit turpis, vel laoreet ligula odio et nisl. Mauris id lectus magna. Sed gravida tincidunt sapien quis dapibus.
+				Quisque justo risus, elementum quis condimentum vitae, venenatis sit amet nisl. Vivamus interdum pretium libero dictum eleifend. Donec eros tortor, facilisis eget maximus in, malesuada a magna. Nulla ac felis turpis. Donec pellentesque est in rhoncus tempus. Proin ac purus porttitor, interdum est a, venenatis mi. Maecenas nunc nulla, viverra ut ornare id, luctus eu nulla. Pellentesque massa turpis, porta ut tincidunt ut, ullamcorper vitae urna. Nam congue euismod placerat. Vestibulum aliquet, metus vitae viverra posuere, lacus urna hendrerit turpis, vel laoreet ligula odio et nisl. Mauris id lectus magna. Sed gravida tincidunt sapien quis dapibus.Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spankerDeadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spankerDeadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker
 			</div>
 			<div slot="footer">I'm in the <b>footer</b> slot of the <b>d2l-template-primary-secondary</b> component!</div>
 		</d2l-template-primary-secondary>

package/templates/primary-secondary/primary-secondary.js

@@ -542,7 +542,6 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 
 			main {
 				flex: 2 0 0;
-				-webkit-overflow-scrolling: touch;
 				overflow-x: hidden;
 				transition: none;
 			}
@@ -570,7 +569,6 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 			aside {
 				height: 100%;
 				min-width: ${desktopMinSize}px;
-				-webkit-overflow-scrolling: touch;
 				overflow-x: hidden;
 				overflow-y: scroll;
 			}