@brightspace-ui/core 3.127.0 → 3.127.2

package/components/collapsible-panel/collapsible-panel.js

@@ -6,6 +6,7 @@ import { heading1Styles, heading2Styles, heading3Styles, heading4Styles } from '
 import { classMap } from 'lit/directives/class-map.js';
 import { EventSubscriberController } from '../../controllers/subscriber/subscriberControllers.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { getComposedActiveElement } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
@@ -27,6 +28,21 @@ const normalizeHeadingLevel = (number) => {
 
 const defaultHeading = 3;
 
+let tabPressed = false;
+let tabListenerAdded = false;
+function addTabListener() {
+	if (tabListenerAdded) return;
+	tabListenerAdded = true;
+	document.addEventListener('keydown', e => {
+		if (e.keyCode !== 9) return;
+		tabPressed = true;
+	});
+	document.addEventListener('keyup', e => {
+		if (e.keyCode !== 9) return;
+		tabPressed = false;
+	});
+}
+
 /**
  * A container with a title that can be expanded/collapsed to show/hide content.
  * @slot before - Slot for content to be placed at the left side of the header, aligned with the title and header slot
@@ -85,7 +101,6 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 			 * @type {boolean}
 			 */
 			noSticky: { attribute: 'no-sticky', type: Boolean },
-			_clicked: { state: true },
 			_focused: { state: true },
 			_hasBefore: { state: true },
 			_hasSummary: { state: true },
@@ -323,7 +338,6 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 		this.paddingType = 'default';
 		this.type = 'default';
 		this.noSticky = false;
-		this._clicked = false;
 		this._focused = false;
 		this._group = undefined;
 		this._groupSubscription = new EventSubscriberController(this, 'collapsible-panel-group', {
@@ -341,6 +355,11 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 		return '.d2l-collapsible-panel-opener';
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+		addTabListener();
+	}
+
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._intersectionObserver) this._intersectionObserver.disconnect();
@@ -349,7 +368,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 	render() {
 		const classes = {
 			'd2l-collapsible-panel': true,
-			'focused': this._focused && !this._clicked,
+			'focused': this._focused,
 			'has-summary': this._hasSummary,
 			'has-before': this._hasBefore,
 			'scrolled': this._scrolled,
@@ -425,7 +444,6 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 	}
 
 	_handlePanelClick(e) {
-		this._clicked = e.detail && e.detail > 0; // detect if click event is from a mouse
 		const content = this.shadowRoot.querySelector('.d2l-collapsible-panel-content');
 		if (e.target !== content && !isComposedAncestor(content, e.target)) this._toggleExpand();
 	}
@@ -436,11 +454,15 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 	}
 
 	_onBlur() {
-		this._focused = false;
-		this._clicked = false;
+		setTimeout(() => {
+			// don't remove focus if the button still ends up in focus
+			if (getComposedActiveElement() === this.shadowRoot.querySelector('button')) return;
+			this._focused = false;
+		}, 10);
 	}
 
 	_onFocus() {
+		if (!tabPressed) return;
 		this._focused = true;
 	}
 

package/lang/pt.js

@@ -50,14 +50,14 @@ export default {
 	"components.input-color.backgroundColor": "Cor do Plano de fundo",
 	"components.input-color.foregroundColor": "Cor do Primeiro plano",
 	"components.input-color.none": "Nenhum",
-	"components.input-date-range.endDate": "Data final",
+	"components.input-date-range.endDate": "Data Final",
 	"components.input-date-range.errorBadInput": "{startLabel} precisa ser anterior a {endLabel}",
 	"components.input-date-range.interactive-label": "Entrada do intervalo de datas",
-	"components.input-date-range.startDate": "Data de início",
-	"components.input-date-time-range-to.to": "a",
-	"components.input-date-time-range.endDate": "Data final",
+	"components.input-date-range.startDate": "Data de Início",
+	"components.input-date-time-range-to.to": "para",
+	"components.input-date-time-range.endDate": "Data Final",
 	"components.input-date-time-range.errorBadInput": "{startLabel} precisa ser anterior a {endLabel}",
-	"components.input-date-time-range.startDate": "Data de início",
+	"components.input-date-time-range.startDate": "Data de Início",
 	"components.input-date-time.date": "Data",
 	"components.input-date-time.errorMaxDateOnly": "A data deve ser anterior ou igual a {maxDate}",
 	"components.input-date-time.errorMinDateOnly": "A data deve ser igual ou posterior a {minDate}",
@@ -107,14 +107,14 @@ export default {
 	"components.more-less.more": "mais",
 	"components.object-property-list.item-placeholder-text": "Item de espaço reservado",
 	"components.overflow-group.moreActions": "Mais ações",
-	"components.pager-load-more.action": "Carregar mais",
+	"components.pager-load-more.action": "Carregar Mais",
 	"components.pager-load-more.action-with-page-size": "Carregar mais {count}",
 	"components.pageable.info": "{count, plural, one {{countFormatted} item} other {{countFormatted} itens}}",
 	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} de {totalCountFormatted} item} other {{countFormatted} de {totalCountFormatted} itens}}",
 	"components.pager-load-more.status-loading": "Carregando mais itens",
 	"components.selection.action-max-hint": "{count, plural, one {Desativado quando mais de {countFormatted} item é selecionado} other {Desativado quando mais de {countFormatted} itens são selecionados}}",
 	"components.selection.action-required-hint": "Selecione um item para realizar esta ação",
-	"components.selection.select-all": "Selecionar tudo",
+	"components.selection.select-all": "Selecionar Tudo",
 	"components.selection.select-all-items": "Selecione todos os {count} itens",
 	"components.selection.selected": "{count} selecionados",
 	"components.selection.selected-plus": "Mais de {count} selecionados",
@@ -129,20 +129,20 @@ export default {
 	"components.table-controls.label": "Ações para a tabela",
 	"components.tabs.next": "Ir para frente",
 	"components.tabs.previous": "Ir para trás",
-	"components.tag-list.clear": "Clique em, pressione Backspace ou pressione a tecla Delete para remover o item {value}",
+	"components.tag-list.clear": "Clique, pressione a tecla Backspace ou a tecla Delete para remover o item {value}",
 	"components.tag-list.clear-all": "Limpar tudo",
-	"components.tag-list.cleared-all": "Todos os itens da lista de marcas foram removidos",
-	"components.tag-list.cleared-item": "Item {value} da lista de marcas removido",
+	"components.tag-list.cleared-all": "Todos os itens da lista de etiquetas foram removidos",
+	"components.tag-list.cleared-item": "Item {value} da lista de etiquetas removido",
 	"components.tag-list.interactive-label": "Lista de marcas, {count} itens",
 	"components.tag-list.num-hidden": "+ {count} mais",
 	"components.tag-list.role-description": "Lista de marcas",
 	"components.tag-list.show-less": "Mostrar menos",
-	"components.tag-list.show-more-description": "Selecione para mostrar itens ocultos da lista de marcas",
+	"components.tag-list.show-more-description": "Selecione para mostrar itens ocultos da lista de etiquetas",
 	"components.tag-list-item.role-description": "Marca",
 	"components.tag-list-item.tooltip-arrow-keys": "Teclas de seta",
-	"components.tag-list-item.tooltip-arrow-keys-desc": "Mover entre marcas",
-	"components.tag-list-item.tooltip-delete-key": "Retroceder/Excluir",
-	"components.tag-list-item.tooltip-delete-key-desc": "Excluir a marca de foco",
+	"components.tag-list-item.tooltip-arrow-keys-desc": "Mover entre etiquetas",
+	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",
+	"components.tag-list-item.tooltip-delete-key-desc": "Excluir a etiqueta de foco",
 	"components.tag-list-item.tooltip-title": "Controles do teclado",
 	"templates.primary-secondary.divider": "Divisor do painel secundário",
 	"templates.primary-secondary.secondary-panel": "Painel secundário"

package/package.json

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