@brightspace-ui/core 3.325.0 → 3.326.1

package/components/dialog/dialog-mixin.js

@@ -393,12 +393,17 @@ export const DialogMixin = superclass => class extends superclass {
 		));
 	}
 
-	_handleDialogClose(e) {
+	_handleDialogCloseWithinNative(e) {
+		// prevent close event from bubbling and closing parent dialogs
+		e.stopPropagation();
+	}
+
+	_handleDialogCloseWithinNonNative(e) {
 		this._nestedShowing = false;
 		e.stopPropagation();
 	}
 
-	_handleDialogOpen(e) {
+	_handleDialogOpenWithinNonNative(e) {
 		this._nestedShowing = true;
 		e.stopPropagation();
 	}
@@ -559,6 +564,7 @@ export const DialogMixin = superclass => class extends superclass {
 				class="${classMap(dialogOuterClasses)}"
 				@click="${this._handleClick}"
 				@close="${this._handleClose}"
+				@d2l-dialog-close="${this._handleDialogCloseWithinNative}"
 				@d2l-fullscreen-within="${this._handleFullscreenWithin}"
 				id="${this._dialogId}"
 				@keydown="${this._handleKeyDown}"
@@ -571,8 +577,8 @@ export const DialogMixin = superclass => class extends superclass {
 				aria-labelledby="${info.labelId}"
 				class="${classMap(dialogOuterClasses)}"
 				@click="${this._handleClick}"
-				@d2l-dialog-close="${this._handleDialogClose}"
-				@d2l-dialog-open="${this._handleDialogOpen}"
+				@d2l-dialog-close="${this._handleDialogCloseWithinNonNative}"
+				@d2l-dialog-open="${this._handleDialogOpenWithinNonNative}"
 				@d2l-fullscreen-within="${this._handleFullscreenWithin}"
 				id="${this._dialogId}"
 				role="${info.role}"

package/components/toolbar/toolbar-item-styles.js

@@ -46,8 +46,8 @@ export const toolbarButtonStyles = css`
 		border-radius: 4px;
 		height: 100%;
 		position: absolute;
-		transform: scale(0.1, 0.1);
-		transition: background-color 150ms linear, transform 150ms linear;
+		transform: scale(0.89, 0.89);
+		transition: background-color 100ms linear, transform 100ms linear;
 		width: 100%;
 		z-index: -1;
 	}

package/components/toolbar/toolbar-separator.js

@@ -0,0 +1,32 @@
+import '../colors/colors.js';
+import { css, html, LitElement } from 'lit';
+import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
+
+/**
+ * A toolbar item separator
+ */
+class ToolbarSeparator extends ThemeMixin(LitElement) {
+
+	static styles = css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		div {
+			border-inline-start: 1px solid var(--d2l-theme-border-color-standard);
+			min-height: 34px;
+		}
+		:host([theme="dark"]) div {
+			border-inline-start: 1px solid var(--d2l-color-tungsten);
+		}
+	`;
+
+	render() {
+		return html`<div></div>`;
+	}
+
+}
+
+customElements.define('d2l-toolbar-separator', ToolbarSeparator);

package/custom-elements.json

@@ -17526,6 +17526,17 @@
         }
       ]
     },
+    {
+      "name": "d2l-toolbar-separator",
+      "path": "./components/toolbar/toolbar-separator.js",
+      "description": "A toolbar item separator",
+      "properties": [
+        {
+          "name": "styles",
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t}\\n\\t\\t:host([hidden]) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\tdiv {\\n\\t\\t\\tborder-inline-start: 1px solid var(--d2l-theme-border-color-standard);\\n\\t\\t\\tmin-height: 34px;\\n\\t\\t}\\n\\t\\t:host([theme=\\\"dark\\\"]) div {\\n\\t\\t\\tborder-inline-start: 1px solid var(--d2l-color-tungsten);\\n\\t\\t}\\n\\t`\""
+        }
+      ]
+    },
     {
       "name": "d2l-toolbar",
       "path": "./components/toolbar/toolbar.js",

package/package.json

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