@brightspace-ui/core 2.19.0 → 2.21.0

package/components/calendar/calendar.js

@@ -422,7 +422,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 		this.addEventListener('blur', () => this._isInitialFocusDate = true);
 
-		this.addEventListener('d2l-localize-behavior-language-changed', () => {
+		this.addEventListener('d2l-localize-resources-change', () => {
 			calendarData = null;
 			getCalendarData(true);
 			this.requestUpdate();

package/components/inputs/input-date.js

@@ -200,7 +200,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		this._textInput = this.shadowRoot.querySelector('d2l-input-text');
 
 		this.addEventListener('blur', this._handleBlur);
-		this.addEventListener('d2l-localize-behavior-language-changed', () => {
+		this.addEventListener('d2l-localize-resources-change', () => {
 			this._dateTimeDescriptor = getDateTimeDescriptorShared(true);
 			this.requestUpdate();
 			this.updateComplete.then(() => {

package/components/inputs/input-number.js

@@ -308,7 +308,7 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
-		this.addEventListener('d2l-localize-behavior-language-changed', () => {
+		this.addEventListener('d2l-localize-resources-change', () => {
 			this._descriptor = getNumberDescriptor();
 			if (this._formattedValue.length > 0) {
 				this._updateFormattedValue();

package/components/inputs/input-time.js

@@ -271,7 +271,7 @@ class InputTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		}
 
 		const hiddenContent = this.shadowRoot.querySelector('.d2l-input-time-hidden-content');
-		this.addEventListener('d2l-localize-behavior-language-changed', async() => {
+		this.addEventListener('d2l-localize-resources-change', async() => {
 			await this.updateComplete;
 			this._formattedValue = formatTime(getDateFromISOTime(this.value));
 			INTERVALS.clear();

package/components/link/link.js

@@ -2,21 +2,23 @@ import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 export const linkStyles = css`
 	.d2l-link, .d2l-link:visited, .d2l-link:active, .d2l-link:link {
 		color: var(--d2l-color-celestine);
 		cursor: pointer;
+		outline-style: none;
 		text-decoration: none;
 	}
 	:host([skeleton]) .d2l-link.d2l-skeletize::before {
 		bottom: 0.2rem;
 		top: 0.2rem;
 	}
-	.d2l-link:hover, .d2l-link:focus {
+	.d2l-link:hover,
+	.d2l-link.focus-visible {
 		color: var(--d2l-color-celestine-minus-1);
-		outline-width: 0;
 		text-decoration: underline;
 	}
 	.d2l-link.d2l-link-main {
@@ -42,7 +44,7 @@ export const linkStyles = css`
  * This component can be used just like the native anchor tag.
  * @slot - The content (e.g., text) that when selected causes navigation
  */
-class Link extends FocusMixin(LitElement) {
+class Link extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
 
 	static get properties() {
 		return {

package/components/switch/README.md

@@ -49,7 +49,6 @@ The `d2l-switch` element is a generic switch with on/off semantics.
 | `disabled` | Boolean | Disables the switch |
 | `on` | Boolean | Whether the switch is "on" or "off" |
 | `text-position` | String | Valid values are: `start`, `end` (default), and `hidden` |
-| `tooltip` | String | Text to display in a tooltip for the switch |
 ### Events
 
 - `change`: dispatched when the `on` property is updated
@@ -88,7 +87,6 @@ The `d2l-switch-visibility` element is a variant of the generic switch configure
 | `disabled` | Boolean | Disabled the switch |
 | `on` | Boolean | Whether the switch is "on" or "off" |
 | `text-position` | String | Valid values are: `start`, `end` (default), and `hidden` |
-| `tooltip` | String | Text to display in a tooltip for the switch |
 
 ### Events
 

package/components/switch/demo/switch.html

@@ -45,14 +45,6 @@
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>On/Off (with tooltip)</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-switch text="Dark Mode" tooltip="Whether dark mode is turned on or off." on></d2l-switch>
-				</template>
-			</d2l-demo-snippet>
-
 			<h2>Visibility</h2>
 
 			<d2l-demo-snippet>

package/components/switch/switch-mixin.js

@@ -1,5 +1,4 @@
 import '../colors/colors.js';
-import '../tooltip/tooltip.js';
 import { css, html } from 'lit';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
@@ -31,12 +30,7 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 			 * @type {'start'|'end'|'hidden'}
 			 * @default end
 			 */
-			textPosition: { type: String, attribute: 'text-position', reflect: true },
-			/**
-			 * The text that is displayed in a tooltip when the switch is hovered over.
-			 * @type {string}
-			 */
-			tooltip: { type: String, reflect: true }
+			textPosition: { type: String, attribute: 'text-position', reflect: true }
 		};
 	}
 
@@ -172,7 +166,6 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 		this.labelHidden = false;
 		this.on = false;
 		this.textPosition = 'end';
-		this._switchId = getUniqueId();
 		this._textId = getUniqueId();
 	}
 
@@ -192,7 +185,6 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 		const text = html`<span id="${this._textId}" class="d2l-switch-text">${this.text}</span>`;
 		const textPosition = (this.textPosition === 'start' || this.textPosition === 'hidden'
 			? this.textPosition : 'end');
-		const tooltip = (this.tooltip ? html`<d2l-tooltip for="${this._switchId}">${this.tooltip}</d2l-tooltip>` : '');
 		return html`
 			${textPosition === 'start' ? text : ''}
 			<div
@@ -201,7 +193,6 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 				aria-labelledby="${ifDefined(textPosition !== 'hidden' ? this._textId : undefined)}"
 				class="d2l-switch-container"
 				@click="${this._handleClick}"
-				id="${this._switchId}"
 				@keydown="${this._handleKeyDown}"
 				@keyup="${this._handleKeyUp}"
 				role="switch"
@@ -212,7 +203,6 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 					<div class="d2l-switch-icon-off">${this.offIcon}</div>
 				</div>
 			</div>
-			${tooltip}
 			${textPosition === 'end' ? text : ''}
 		`;
 	}

package/custom-elements.json

@@ -9358,11 +9358,6 @@
           "type": "string",
           "default": "\"\\\"Visibility\\\"\""
         },
-        {
-          "name": "tooltip",
-          "description": "The text that is displayed in a tooltip when the switch is hovered over.",
-          "type": "string"
-        },
         {
           "name": "disabled",
           "description": "Disables the switch from being toggled.",
@@ -9398,12 +9393,6 @@
           "type": "string",
           "default": "\"\\\"Visibility\\\"\""
         },
-        {
-          "name": "tooltip",
-          "attribute": "tooltip",
-          "description": "The text that is displayed in a tooltip when the switch is hovered over.",
-          "type": "string"
-        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -9448,11 +9437,6 @@
           "description": "REQUIRED: The text that is displayed for the switch label.",
           "type": "string"
         },
-        {
-          "name": "tooltip",
-          "description": "The text that is displayed in a tooltip when the switch is hovered over.",
-          "type": "string"
-        },
         {
           "name": "disabled",
           "description": "Disables the switch from being toggled.",
@@ -9487,12 +9471,6 @@
           "description": "REQUIRED: The text that is displayed for the switch label.",
           "type": "string"
         },
-        {
-          "name": "tooltip",
-          "attribute": "tooltip",
-          "description": "The text that is displayed in a tooltip when the switch is hovered over.",
-          "type": "string"
-        },
         {
           "name": "disabled",
           "attribute": "disabled",

package/mixins/focus-visible-polyfill-mixin.md

@@ -18,7 +18,7 @@ import { FocusVisiblePolyfillMixin } from '@brightspace-ui/core/mixins/focus-vis
 class MyComponent extends FocusVisiblePolyfillMixin(LitElement) {
   static get styles() {
     return css`
-      /* styles to apply when clicked or focused with a keybard */
+      /* styles to apply when clicked or focused with a keyboard */
       button:hover,
       button:focus {
         background-color: #cccccc;

package/mixins/localize-mixin.js

@@ -35,11 +35,10 @@ export const LocalizeMixin = dedupeMixin(superclass => class extends superclass
 							}
 						}
 						this.__resources = resources;
+						this._onResourcesChange();
 						if (first) {
 							resolve();
 							first = false;
-						} else {
-							this._languageChange();
 						}
 					});
 			};
@@ -183,11 +182,9 @@ export const LocalizeMixin = dedupeMixin(superclass => class extends superclass
 		return this.constructor['getLocalizeResources'] !== undefined;
 	}
 
-	_languageChange() {
+	_onResourcesChange() {
 		/** @ignore */
-		this.dispatchEvent(new CustomEvent(
-			'd2l-localize-behavior-language-changed', { bubbles: true, composed: true }
-		));
+		this.dispatchEvent(new CustomEvent('d2l-localize-resources-change'));
 	}
 
 });

package/package.json

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