@brightspace-ui/core 3.250.1 → 3.252.0

package/components/inputs/input-checkbox-styles.js

@@ -0,0 +1,119 @@
+import { css, unsafeCSS } from 'lit';
+import { _isValidCssSelector } from '../../helpers/internal/css.js';
+import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
+
+registerSemanticVariableForSvgImageUrl(
+	'--d2l-input-checkbox-check-image',
+	`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+		<path fill="var(--d2l-theme-icon-color-standard)" d="M8.4 16.6c.6.6 1.5.6 2.1 0l8-8c.6-.6.6-1.5 0-2.1-.6-.6-1.5-.6-2.1 0l-6.9 7-1.9-1.9c-.6-.6-1.5-.6-2.1 0-.6.6-.6 1.5 0 2.1l2.9 2.9z"/>\
+	</svg>`
+);
+
+registerSemanticVariableForSvgImageUrl(
+	'--d2l-input-checkbox-indeterminate-image',
+	`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+		<path fill="var(--d2l-theme-icon-color-standard)" d="M7.5,11h9c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-9C6.7,14,6,13.3,6,12.5l0,0C6,11.7,6.7,11,7.5,11z"/>
+	</svg>`
+);
+
+export const cssSizes = {
+	inputBoxSize: 1.2,
+	checkboxMargin: 0.5,
+};
+
+/**
+ * A private helper method that should not be used by general consumers
+ */
+export const _generateInputCheckboxStyles = (selector) => {
+	if (!_isValidCssSelector(selector)) return;
+
+	const selectorCSS = unsafeCSS(selector);
+	return css`
+		${selectorCSS} {
+			--d2l-input-checkbox-background-image: none;
+			--d2l-input-checkbox-background-color: var(--d2l-theme-background-color-interactive-faint-default);
+			--d2l-input-checkbox-background-image-disabled:
+				linear-gradient(
+					var(--d2l-theme-background-color-interactive-faint-disabled),
+					var(--d2l-theme-background-color-interactive-faint-disabled)
+				),
+				var(--d2l-input-checkbox-background-image);
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			appearance: none;
+			background-image: var(--d2l-input-checkbox-background-image);
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: ${cssSizes.inputBoxSize}rem ${cssSizes.inputBoxSize}rem;
+			border-radius: 0.3rem;
+			border-style: solid;
+			box-sizing: border-box;
+			display: inline-block;
+			height: ${cssSizes.inputBoxSize}rem;
+			margin: 0;
+			padding: 0;
+			vertical-align: middle;
+			width: ${cssSizes.inputBoxSize}rem;
+		}
+		${selectorCSS}:checked {
+			--d2l-input-checkbox-background-image: var(--d2l-input-checkbox-check-image);
+		}
+		${selectorCSS}:indeterminate {
+			--d2l-input-checkbox-background-image: var(--d2l-input-checkbox-indeterminate-image);
+		}
+		${selectorCSS},
+		${selectorCSS}:hover:disabled {
+			background-color: var(--d2l-input-checkbox-background-color);
+			border-color: var(--d2l-theme-border-color-emphasized);
+			border-width: 1px;
+		}
+		${selectorCSS}:hover:disabled {
+			border-color: var(--d2l-theme-border-color-disabled);
+		}
+		${selectorCSS}:hover,
+		${selectorCSS}:focus,
+		${selectorCSS}.d2l-input-checkbox-focus,
+		:host(.d2l-hovering) input[type="checkbox"]:not(:disabled).d2l-input-checkbox {
+			border-color: var(--d2l-input-checkbox-border-color-hover-focus, var(--d2l-theme-border-color-focus));
+			border-width: 2px;
+			outline: none;
+		}
+		${selectorCSS}:disabled,
+		${selectorCSS}:where([aria-disabled="true"]) {
+			background-image: var(--d2l-input-checkbox-background-image-disabled);
+			border-color: var(--d2l-theme-border-color-disabled);
+		}
+		@media (forced-colors: active) {
+			${selectorCSS}:checked,
+			${selectorCSS}:indeterminate {
+				background-image: none;
+				position: relative;
+			}
+			${selectorCSS}:checked::after,
+			${selectorCSS}:indeterminate::after {
+				background-color: FieldText;
+				content: "";
+				display: block;
+				height: ${cssSizes.inputBoxSize}rem;
+				left: 50%;
+				position: absolute;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				width: ${cssSizes.inputBoxSize}rem;
+			}
+
+			${selectorCSS}:disabled,
+			${selectorCSS}:where([aria-disabled="true"]) {
+				opacity: var(--d2l-theme-opacity-disabled-control);
+			}
+
+			${selectorCSS}:checked::after {
+				mask-image: var(--d2l-input-checkbox-check-image);
+			}
+
+			${selectorCSS}:indeterminate::after {
+				mask-image: var(--d2l-input-checkbox-indeterminate-image);
+			}
+		}
+	`;
+};

package/components/inputs/input-checkbox.js

@@ -1,5 +1,6 @@
 import '../expand-collapse/expand-collapse-content.js';
 import '../tooltip/tooltip.js';
+import { _generateInputCheckboxStyles, cssSizes } from './input-checkbox-styles.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
@@ -8,116 +9,9 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { InputInlineHelpMixin } from './input-inline-help.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
-registerSemanticVariableForSvgImageUrl(
-	'--d2l-input-checkbox-check-image',
-	`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-		<path fill="var(--d2l-theme-icon-color-standard)" d="M8.4 16.6c.6.6 1.5.6 2.1 0l8-8c.6-.6.6-1.5 0-2.1-.6-.6-1.5-.6-2.1 0l-6.9 7-1.9-1.9c-.6-.6-1.5-.6-2.1 0-.6.6-.6 1.5 0 2.1l2.9 2.9z"/>\
-	</svg>`
-);
-
-registerSemanticVariableForSvgImageUrl(
-	'--d2l-input-checkbox-indeterminate-image',
-	`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-		<path fill="var(--d2l-theme-icon-color-standard)" d="M7.5,11h9c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-9C6.7,14,6,13.3,6,12.5l0,0C6,11.7,6.7,11,7.5,11z"/>
-	</svg>`
-);
-
-export const cssSizes = {
-	inputBoxSize: 1.2,
-	checkboxMargin: 0.5,
-};
-
-export const checkboxStyles = css`
-	input[type="checkbox"].d2l-input-checkbox {
-		--d2l-input-checkbox-background-image: none;
-		--d2l-input-checkbox-background-color: var(--d2l-theme-background-color-interactive-faint-default);
-		--d2l-input-checkbox-background-image-disabled:
-			linear-gradient(
-				var(--d2l-theme-background-color-interactive-faint-disabled),
-				var(--d2l-theme-background-color-interactive-faint-disabled)
-			),
-			var(--d2l-input-checkbox-background-image);
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		appearance: none;
-		background-image: var(--d2l-input-checkbox-background-image);
-		background-position: center center;
-		background-repeat: no-repeat;
-		background-size: ${cssSizes.inputBoxSize}rem ${cssSizes.inputBoxSize}rem;
-		border-radius: 0.3rem;
-		border-style: solid;
-		box-sizing: border-box;
-		display: inline-block;
-		height: ${cssSizes.inputBoxSize}rem;
-		margin: 0;
-		padding: 0;
-		vertical-align: middle;
-		width: ${cssSizes.inputBoxSize}rem;
-	}
-	input[type="checkbox"].d2l-input-checkbox:checked {
-		--d2l-input-checkbox-background-image: var(--d2l-input-checkbox-check-image);
-	}
-	input[type="checkbox"].d2l-input-checkbox:indeterminate {
-		--d2l-input-checkbox-background-image: var(--d2l-input-checkbox-indeterminate-image);
-	}
-	input[type="checkbox"].d2l-input-checkbox,
-	input[type="checkbox"].d2l-input-checkbox:hover:disabled {
-		background-color: var(--d2l-input-checkbox-background-color);
-		border-color: var(--d2l-theme-border-color-emphasized);
-		border-width: 1px;
-	}
-	input[type="checkbox"].d2l-input-checkbox:hover:disabled {
-		border-color: var(--d2l-theme-border-color-disabled);
-	}
-	input[type="checkbox"].d2l-input-checkbox:hover,
-	input[type="checkbox"].d2l-input-checkbox:focus,
-	input[type="checkbox"].d2l-input-checkbox.d2l-input-checkbox-focus,
-	:host(.d2l-hovering) input[type="checkbox"]:not(:disabled).d2l-input-checkbox {
-		border-color: var(--d2l-input-checkbox-border-color-hover-focus, var(--d2l-theme-border-color-focus));
-		border-width: 2px;
-		outline: none;
-	}
-	input[type="checkbox"].d2l-input-checkbox:disabled,
-	input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
-		background-image: var(--d2l-input-checkbox-background-image-disabled);
-		border-color: var(--d2l-theme-border-color-disabled);
-	}
-	@media (forced-colors: active) {
-		input[type="checkbox"].d2l-input-checkbox:checked,
-		input[type="checkbox"].d2l-input-checkbox:indeterminate {
-			background-image: none;
-			position: relative;
-		}
-		input[type="checkbox"].d2l-input-checkbox:checked::after,
-		input[type="checkbox"].d2l-input-checkbox:indeterminate::after {
-			background-color: FieldText;
-			content: "";
-			display: block;
-			height: ${cssSizes.inputBoxSize}rem;
-			left: 50%;
-			position: absolute;
-			top: 50%;
-			transform: translate(-50%, -50%);
-			width: ${cssSizes.inputBoxSize}rem;
-		}
-
-		input[type="checkbox"].d2l-input-checkbox:disabled,
-		input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
-			opacity: var(--d2l-theme-opacity-disabled-control);
-		}
-
-		input[type="checkbox"].d2l-input-checkbox:checked::after {
-			mask-image: var(--d2l-input-checkbox-check-image);
-		}
-
-		input[type="checkbox"].d2l-input-checkbox:indeterminate::after {
-			mask-image: var(--d2l-input-checkbox-indeterminate-image);
-		}
-	}
-`;
+export const checkboxStyles = _generateInputCheckboxStyles('input[type="checkbox"].d2l-input-checkbox');
 
 /**
  * A component that can be used to show a checkbox and optional visible label.

package/components/popover/popover-mixin.js

@@ -40,11 +40,16 @@ const pointerRotatedLength = Math.SQRT2 * parseFloat(pointerLength);
 
 export const isPopoverSupported = ('popover' in HTMLElement.prototype);
 
-const getScrollbarWidth = () => {
-	const width = window.innerWidth - document.documentElement.clientWidth;
-	if (width > 0) return width + 1; // 16 when present, but can be 0 even if visible (ex. MacOS depending on settings)
-	else return 0;
-};
+const SCROLLBAR_WIDTH = (() => {
+	const div = document.createElement('div');
+	div.style.overflow = 'scroll';
+	div.style.position = 'fixed';
+	div.style.top = '-99999px';
+	document.documentElement.appendChild(div);
+	const width = div.offsetWidth - div.clientWidth;
+	document.documentElement.removeChild(div);
+	return width && width + 1;
+})(); // ~16 when present, but can be 0 even if invisible (e.g. macOS depending on settings)
 
 export const PopoverMixin = superclass => class extends superclass {
 
@@ -482,6 +487,10 @@ export const PopoverMixin = superclass => class extends superclass {
 					this._contentHeight = this._maxHeight !== null && availableHeight > this._maxHeight
 						? this._maxHeight - 2 : availableHeight;
 
+					if (height === (this._maxHeight ?? 0) || content.clientHeight >= availableHeight) {
+						this._width = this._width + SCROLLBAR_WIDTH;
+					}
+
 					// ensure the content height has updated when the __toggleScrollStyles event handler runs
 					await this.updateComplete;
 				}
@@ -493,7 +502,7 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		};
 
-		const scrollWidth = content.scrollWidth;
+		const scrollWidth = Math.ceil(content.getBoundingClientRect().width);
 		const availableWidth = window.innerWidth - 40;
 
 		this._width = (availableWidth > scrollWidth ? scrollWidth : availableWidth);
@@ -823,7 +832,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		}
 
 		// if no width property set, automatically size to maximum width
-		let widthOverride = this._width ? this._width : maxWidthOverride;
+		let widthOverride = this._width || maxWidthOverride;
 		// ensure width is between minWidth and maxWidth
 		if (widthOverride && maxWidthOverride && widthOverride > (maxWidthOverride - 20)) widthOverride = maxWidthOverride - 20;
 		if (widthOverride && minWidthOverride && widthOverride < (minWidthOverride - 20)) widthOverride = minWidthOverride - 20;
@@ -910,16 +919,16 @@ export const PopoverMixin = superclass => class extends superclass {
 					}
 				} else {
 					if (this._preferredPosition.span === positionSpans.end) {
-						position.right = window.innerWidth - openerRect.right + xAdjustment - getScrollbarWidth();
+						position.right = window.innerWidth - openerRect.right + xAdjustment - SCROLLBAR_WIDTH;
 					} else {
-						position.left = (window.innerWidth - openerRect.left - xAdjustment - getScrollbarWidth()) * -1;
+						position.left = (window.innerWidth - openerRect.left - xAdjustment - SCROLLBAR_WIDTH) * -1;
 					}
 				}
 			} else {
 				if (!this._rtl) {
 					position.left = openerRect.left + ((openerRect.width - pointerRect.width) / 2);
 				} else {
-					position.right = window.innerWidth - openerRect.left - ((openerRect.width + pointerRect.width) / 2) - getScrollbarWidth();
+					position.right = window.innerWidth - openerRect.left - ((openerRect.width + pointerRect.width) / 2) - SCROLLBAR_WIDTH;
 				}
 			}
 
@@ -937,13 +946,13 @@ export const PopoverMixin = superclass => class extends superclass {
 				if (!this._rtl) {
 					position.right = (openerRect.left - this._offset + 7) * -1; // 7 minor adjustment to position pointer at edge of content
 				} else {
-					position.left = (window.innerWidth - openerRect.right + 7 - this._offset - getScrollbarWidth()) * -1; // 7 minor adjustment to position pointer at edge of content
+					position.left = (window.innerWidth - openerRect.right + 7 - this._offset - SCROLLBAR_WIDTH) * -1; // 7 minor adjustment to position pointer at edge of content
 				}
 			} else {
 				if (!this._rtl) {
 					position.left = openerRect.left + openerRect.width + this._offset - 7; // 7 minor adjustment to position pointer at edge of content
 				} else {
-					position.right = window.innerWidth - openerRect.left - 7 + this._offset - getScrollbarWidth(); // 7 minor adjustment to position pointer at edge of content
+					position.right = window.innerWidth - openerRect.left - 7 + this._offset - SCROLLBAR_WIDTH; // 7 minor adjustment to position pointer at edge of content
 				}
 			}
 
@@ -962,7 +971,7 @@ export const PopoverMixin = superclass => class extends superclass {
 				if (!this._rtl) {
 					position.left = openerRect.left + xAdjustment;
 				} else {
-					position.right = window.innerWidth - openerRect.left - openerRect.width + xAdjustment - getScrollbarWidth();
+					position.right = window.innerWidth - openerRect.left - openerRect.width + xAdjustment - SCROLLBAR_WIDTH;
 				}
 			}
 
@@ -983,13 +992,13 @@ export const PopoverMixin = superclass => class extends superclass {
 				if (!this._rtl) {
 					position.right = (openerRect.left - this._offset) * -1;
 				} else {
-					position.left = (window.innerWidth - openerRect.right - this._offset - getScrollbarWidth()) * -1;
+					position.left = (window.innerWidth - openerRect.right - this._offset - SCROLLBAR_WIDTH) * -1;
 				}
 			} else {
 				if (!this._rtl) {
 					position.left = openerRect.left + openerRect.width + this._offset;
 				} else {
-					position.right = window.innerWidth - openerRect.left + this._offset - getScrollbarWidth();
+					position.right = window.innerWidth - openerRect.left + this._offset - SCROLLBAR_WIDTH;
 				}
 			}
 
@@ -1082,7 +1091,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		const widthStyle = {
 			maxWidth: this._maxWidth ? `${this._maxWidth}px` : undefined,
 			minWidth: this._minWidth ? `${this._minWidth}px` : undefined,
-			width: this._width ? `${this._width + 3}px` : undefined // add 3 to content to account for possible rounding and also scrollWidth does not include border
+			width: this._width ? `${this._width + 2}px` : undefined
 		};
 
 		const contentStyle = {

package/components/table/table-wrapper.js

@@ -2,7 +2,7 @@ import '../colors/colors.js';
 import '../scroll-wrapper/scroll-wrapper.js';
 import '../backdrop/backdrop-loading.js';
 import { css, html, LitElement, nothing } from 'lit';
-import { cssSizes } from '../inputs/input-checkbox.js';
+import { cssSizes } from '../inputs/input-checkbox-styles.js';
 import { getComposedParent } from '../../helpers/dom.js';
 import { getFlag } from '../../helpers/flags.js';
 import { ifDefined } from 'lit/directives/if-defined.js';

package/custom-elements.json

@@ -12269,13 +12269,13 @@
       "properties": [
         {
           "name": "properties",
-          "type": "{ demoMode: { type: BooleanConstructor; attribute: string; }; hasFooter: { type: BooleanConstructor; attribute: string; }; hasMainHeader: { type: BooleanConstructor; attribute: string; }; ... 7 more ...; _demoDialogOpened: { ...; }; }",
-          "default": "{\"demoMode\":{\"type\":\"Boolean\",\"attribute\":\"demo-mode\"},\"hasFooter\":{\"type\":\"Boolean\",\"attribute\":\"has-footer\"},\"hasMainHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-main-header\"},\"hasSideNavHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-header\"},\"hasSideNavPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-panel\"},\"hasSupportingHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-header\"},\"hasSupportingPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-panel\"},\"navType\":{\"type\":\"String\",\"attribute\":\"nav-type\"},\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\"},\"_allowThreePanels\":{\"state\":true},\"_demoDialogOpened\":{\"state\":true}}"
+          "type": "{ demoMode: { type: BooleanConstructor; attribute: string; }; hasFooter: { type: BooleanConstructor; attribute: string; }; hasImmersiveHeaderActions: { ...; }; ... 7 more ...; _demoDialogOpened: { ...; }; }",
+          "default": "{\"demoMode\":{\"type\":\"Boolean\",\"attribute\":\"demo-mode\"},\"hasFooter\":{\"type\":\"Boolean\",\"attribute\":\"has-footer\"},\"hasImmersiveHeaderActions\":{\"type\":\"Boolean\",\"attribute\":\"has-immersive-header-actions\"},\"hasMainHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-main-header\"},\"hasSideNavHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-header\"},\"hasSupportingHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-header\"},\"header\":{\"type\":\"String\",\"attribute\":\"header\"},\"immersiveHeaderTitleType\":{\"type\":\"String\",\"attribute\":\"immersive-header-title-type\"},\"layout\":{\"type\":\"String\",\"attribute\":\"layout\"},\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\"},\"_demoDialogOpened\":{\"state\":true}}"
         },
         {
           "name": "styles",
           "type": "CSSResult[]",
-          "default": "[\"selectStyles\",\"tableStyles\",null]"
+          "default": "[\"inputLabelStyles\",\"selectStyles\",\"tableStyles\",null]"
         },
         {
           "name": "demoMode",
@@ -12284,43 +12284,39 @@
         },
         {
           "name": "hasFooter",
-          "type": "boolean",
-          "default": "false"
+          "type": "boolean"
+        },
+        {
+          "name": "hasImmersiveHeaderActions",
+          "type": "boolean"
         },
         {
           "name": "hasMainHeader",
-          "type": "boolean",
-          "default": "false"
+          "type": "boolean"
         },
         {
           "name": "hasSideNavHeader",
-          "type": "boolean",
-          "default": "false"
+          "type": "boolean"
         },
         {
-          "name": "hasSideNavPanel",
-          "type": "boolean",
-          "default": "false"
+          "name": "hasSupportingHeader",
+          "type": "boolean"
         },
         {
-          "name": "hasSupportingHeader",
-          "type": "boolean",
-          "default": "false"
+          "name": "header",
+          "type": "string"
         },
         {
-          "name": "hasSupportingPanel",
-          "type": "boolean",
-          "default": "false"
+          "name": "immersiveHeaderTitleType",
+          "type": "string"
         },
         {
-          "name": "navType",
-          "type": "string",
-          "default": "\"full\""
+          "name": "layout",
+          "type": "string"
         },
         {
           "name": "widthType",
-          "type": "'normal'|'wide'|'fullscreen'",
-          "default": "\"normal\""
+          "type": "string"
         }
       ]
     },

package/helpers/internal/css.js

@@ -1,6 +1,6 @@
 export function _isValidCssSelector(selector) {
 	const partIsValid = (part) => {
-		const re = /([a-zA-Z0-9-_ >.#]+)(\[[a-zA-Z0-9-_]+\])?([a-zA-Z0-9-_ >.#]+)?/g;
+		const re = /([a-zA-Z0-9-_ >.#]+)(\[[a-zA-Z0-9-_="]+\])?([a-zA-Z0-9-_ >.#]+)?/g;
 		if (part === ':host') return true;
 		const match = part.match(re);
 		const isValid = !!match && match.length === 1 && match[0].length === part.length;

package/package.json

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