@brightspace-ui/core 3.313.0 → 3.314.0

package/components/dialog/dialog.js

@@ -6,6 +6,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -62,6 +63,11 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 			padding-bottom: 15px;
 		}
 
+		.d2l-dialog-header > div {
+			display: flex;
+			flex-direction: row-reverse;
+		}
+
 		.d2l-dialog-header > div > d2l-button-icon {
 			flex: none;
 			margin-block: -4px 0;
@@ -99,7 +105,7 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 		this.critical = false;
 		this.describeContent = false;
 		this.fullHeight = false;
-		this.preferNative = false;
+		this.preferNative = getFlag('GAUD-10409-prefer-native-general-dialogs', true);
 		this.width = 600;
 		this._criticalLabelId = getUniqueId();
 		this._titleId = getUniqueId();
@@ -162,18 +168,17 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 			<div id="${ifDefined(this._textId)}" style=${styleMap(slotStyles)}><slot @slotchange="${this._handleSlotChange}"></slot></div>
 		`;
 
-		const contentTabIndex = !this.focusableContentElemPresent ? '0' : undefined;
 		const labelId = this.critical ? `${this._criticalLabelId} ${this._titleId}` : this._titleId;
 		const inner = html`
 			${this.critical ? html`<div id="${this._criticalLabelId}" hidden>${this.localize('components.dialog.critical')}</div>` : nothing}
 			<div class="d2l-dialog-inner" style=${styleMap(heightOverride)}>
 				<div class="d2l-dialog-header">
 					<div>
-						<h2 id="${this._titleId}" class="d2l-heading-3">${this.titleText}</h2>
 						<d2l-button-icon icon="tier1:close-small" text="${this.localize('components.dialog.close')}" @click="${this._abort}"></d2l-button-icon>
+						${this._renderHeading(this.titleText, { id: this._titleId, class: 'd2l-heading-3' })}
 					</div>
 				</div>
-				<div class="d2l-dialog-content" @pending-state="${this._handleAsyncItemState}" tabindex="${ifDefined(contentTabIndex)}">${content}</div>
+				${this._renderContent(content, { handleAsyncItemState: this._handleAsyncItemState, hasTitleText: !!this.titleText })}
 				<div class="${classMap(footerClasses)}">
 					<slot name="footer" @slotchange="${this._handleFooterSlotChange}"></slot>
 				</div>
@@ -210,6 +215,11 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 		this._close('abort');
 	}
 
+	_focusInitial() {
+		if (!this.shadowRoot || this._useNative) return;
+		else super._focusInitial();
+	}
+
 	_handleFooterSlotChange(e) {
 		const footerContent = e.target.assignedNodes({ flatten: true });
 		this._hasFooterContent = (footerContent && footerContent.length > 0);

package/custom-elements.json

@@ -3134,7 +3134,6 @@
         },
         {
           "name": "preferNative",
-          "type": "boolean",
           "default": "false"
         }
       ],

package/package.json

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