@brightspace-ui/core 3.99.0 → 3.99.2

package/components/alert/alert.js

@@ -5,7 +5,6 @@ import { bodyCompactStyles, bodyStandardStyles } from '../typography/styles.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * A component for communicating important information relating to the state of the system and the user's work flow.
@@ -13,7 +12,7 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
  * @fires d2l-alert-close - Dispatched when the alert's close button is clicked
  * @fires d2l-alert-button-press - Dispatched when the alert's action button is clicked
  */
-class Alert extends LocalizeCoreElement(RtlMixin(LitElement)) {
+class Alert extends LocalizeCoreElement(LitElement) {
 
 	static get properties() {
 		return {
@@ -55,6 +54,7 @@ class Alert extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				animation: 600ms ease drop-in;
 				background: white;
 				border: 1px solid var(--d2l-color-mica);
+				border-inline-start-width: 0.3rem;
 				border-radius: 0.3rem;
 				box-sizing: border-box;
 				display: flex;
@@ -68,56 +68,37 @@ class Alert extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				display: none;
 			}
 
-			.d2l-alert-highlight {
-				border-radius: 0.3rem 0 0 0.3rem;
-				bottom: 0;
-				left: 0;
-				margin: -1px;
-				min-width: 0.3rem;
-				position: absolute;
-				top: 0;
-				width: 0.3rem;
+			:host([type="critical"]),
+			:host([type="error"]) {
+				border-inline-start-color: var(--d2l-color-feedback-error);
 			}
-			:host([dir="rtl"]) .d2l-alert-highlight {
-				border-radius: 0 0.3rem 0.3rem 0;
-				left: auto;
-				right: 0;
+			:host([type="warning"]) {
+				border-inline-start-color: var(--d2l-color-feedback-warning);
 			}
-			:host([type="critical"]) .d2l-alert-highlight,
-			:host([type="error"]) .d2l-alert-highlight {
-				background-color: var(--d2l-color-feedback-error);
+			:host([type="default"]),
+			:host([type="call-to-action"]) {
+				border-inline-start-color: var(--d2l-color-feedback-action);
 			}
-			:host([type="warning"]) .d2l-alert-highlight {
-				background-color: var(--d2l-color-feedback-warning);
-			}
-			:host([type="default"]) .d2l-alert-highlight,
-			:host([type="call-to-action"]) .d2l-alert-highlight {
-				background-color: var(--d2l-color-feedback-action);
-			}
-			:host([type="success"]) .d2l-alert-highlight {
-				background-color: var(--d2l-color-feedback-success);
+			:host([type="success"]) {
+				border-inline-start-color: var(--d2l-color-feedback-success);
 			}
 
 			.d2l-alert-text {
 				flex: 1;
-				padding: 0.9rem 1.5rem;
+				padding-block: 0.9rem;
+				padding-inline-end: 1.5rem;
+				padding-inline-start: 1.2rem;
 				position: relative;
 			}
 			.d2l-alert-text-with-actions {
-				padding-right: 0.9rem;
+				padding-inline-end: 0.9rem;
 			}
 
-			:host([dir="rtl"]) .d2l-alert-text-with-actions {
-				padding-left: 0.9rem;
-				padding-right: 1.5rem;
-			}
 			:host([no-padding]) .d2l-alert-text,
 			:host([no-padding]) .d2l-alert-text-with-actions {
-				padding: 0 0 0 0.3rem;
-			}
-			:host([dir="rtl"][no-padding]) .d2l-alert-text,
-			:host([dir="rtl"][no-padding]) .d2l-alert-text-with-actions {
-				padding: 0 0.3rem 0 0;
+				padding-block: 0;
+				padding-inline-end: 0;
+				padding-inline-start: 0;
 			}
 
 			.d2l-alert-subtext {
@@ -125,11 +106,9 @@ class Alert extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			}
 
 			.d2l-alert-action {
-				margin: 0.6rem 0.6rem 0.6rem 0;
-			}
-			:host([dir="rtl"]) .d2l-alert-action {
-				margin-left: 0.6rem;
-				margin-right: 0;
+				margin-block: 0.6rem;
+				margin-inline-end: 0.6rem;
+				margin-inline-start: 0;
 			}
 			:host([no-padding]) .d2l-alert-action {
 				margin: 0;
@@ -180,7 +159,6 @@ class Alert extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		};
 
 		return html`
-			<div class="d2l-alert-highlight"></div>
 			<div class="${classMap(alertTextClasses)}">
 				<slot></slot>
 				${this.subtext ? html`<p class="d2l-body-compact d2l-alert-subtext">${this.subtext}</p>` : null}

package/components/switch/switch-mixin.js

@@ -198,34 +198,33 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 
 		// Note: we render the switchLabel in the case of textPosition === 'hidden' so that any slot handlers can pick up on content being passed in
 		return html`
-			${textPosition === 'start' ? switchLabel : ''}
 			<div
-				aria-checked="${this.on ? 'true' : 'false'}"
-				aria-label="${ifDefined(textPosition === 'hidden' ? this.text : undefined)}"
-				aria-labelledby="${ifDefined(textPosition !== 'hidden' ? this._textId : undefined)}"
-				class="d2l-switch-container"
 				@click="${this._handleClick}"
-				@keydown="${this._handleKeyDown}"
-				@keyup="${this._handleKeyUp}"
-				role="switch"
-				tabindex="${ifDefined(tabindex)}">
-				<div class="${classMap(innerSwitchClasses)}">
-					<div class="d2l-switch-icon-on">${this.onIcon}</div>
-					<div class="d2l-switch-icon-off">${this.offIcon}</div>
-					<div class="d2l-switch-toggle"><div></div></div>
+				@mouseenter="${this._handleSwitchHover}"
+				@mouseleave="${this._handleSwitchHoverLeave}">
+				${textPosition === 'start' ? switchLabel : ''}
+				<div
+					aria-checked="${this.on ? 'true' : 'false'}"
+					aria-label="${ifDefined(textPosition === 'hidden' ? this.text : undefined)}"
+					aria-labelledby="${ifDefined(textPosition !== 'hidden' ? this._textId : undefined)}"
+					class="d2l-switch-container"
+					@keydown="${this._handleKeyDown}"
+					@keyup="${this._handleKeyUp}"
+					role="switch"
+					tabindex="${ifDefined(tabindex)}">
+					<div class="${classMap(innerSwitchClasses)}">
+						<div class="d2l-switch-icon-on">${this.onIcon}</div>
+						<div class="d2l-switch-icon-off">${this.offIcon}</div>
+						<div class="d2l-switch-toggle"><div></div></div>
+					</div>
 				</div>
+				${textPosition === 'end' || textPosition === 'hidden' ? switchLabel : ''}
 			</div>
-			${textPosition === 'end' || textPosition === 'hidden' ? switchLabel : ''}
 		`;
 	}
 
 	get _labelContent() {
-		return html`<span
-			@click='${this._handleClick}'
-			@mouseenter='${this._handleSwitchHover}'
-			@mouseleave='${this._handleSwitchHoverLeave}'>
-			${this.text}
-		</span>`;
+		return this.text;
 	}
 
 	_handleClick() {

package/components/switch/switch-visibility.js

@@ -81,7 +81,8 @@ class VisibilitySwitch extends LocalizeCoreElement(SwitchMixin(LitElement)) {
 				class="${classMap(tooltipHelpClasses)}" 
 				id="conditions-help" 
 				inherit-font-style
-				text="${this.localize('components.switch.conditions')}">
+				text="${this.localize('components.switch.conditions')}"
+				@click="${this._handleTooltipClick}">
 				<slot @slotchange="${this._handleConditionsSlotChange}"></slot>
 			</d2l-tooltip-help>
 			`;
@@ -93,6 +94,10 @@ class VisibilitySwitch extends LocalizeCoreElement(SwitchMixin(LitElement)) {
 		const nodes = e.target.assignedNodes({ flatten: true });
 		this._hasConditions = !!nodes[0]?.textContent?.trim();
 	}
+
+	_handleTooltipClick(e) {
+		e.stopPropagation();
+	}
 }
 
 customElements.define('d2l-switch-visibility', VisibilitySwitch);

package/package.json

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