@brightspace-ui/core 3.147.2 → 3.147.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import '../button/button-icon.js';
|
|
2
2
|
import '../colors/colors.js';
|
|
3
3
|
import '../tooltip/tooltip.js';
|
|
4
|
-
import { css, html, nothing } from 'lit';
|
|
4
|
+
import { css, html, nothing, unsafeCSS } from 'lit';
|
|
5
5
|
import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
|
|
6
|
+
import { getFocusRingStyles, isFocusVisibleSupported, isHasSelectorSupported } from '../../helpers/focus.js';
|
|
6
7
|
import { heading4Styles, labelStyles } from '../typography/styles.js';
|
|
7
8
|
import { announce } from '../../helpers/announce.js';
|
|
8
9
|
import { classMap } from 'lit/directives/class-map.js';
|
|
@@ -37,6 +38,10 @@ export function resetHasDisplayedKeyboardTooltip() {
|
|
|
37
38
|
hasDisplayedKeyboardTooltip = false;
|
|
38
39
|
}
|
|
39
40
|
|
|
41
|
+
const focusSelector = isHasSelectorSupported() && isFocusVisibleSupported() ?
|
|
42
|
+
'.tag-list-item-container:has(:focus-visible)' :
|
|
43
|
+
':host(:focus-within) .tag-list-item-container';
|
|
44
|
+
|
|
40
45
|
export const TagListItemMixin = superclass => class extends LocalizeCoreElement(PropertyRequiredMixin(superclass)) {
|
|
41
46
|
|
|
42
47
|
static get properties() {
|
|
@@ -79,10 +84,11 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
|
|
|
79
84
|
display: none;
|
|
80
85
|
}
|
|
81
86
|
.tag-list-item-container {
|
|
87
|
+
--d2l-focus-ring-offset: -2px;
|
|
82
88
|
align-items: center;
|
|
83
89
|
background-color: var(--d2l-color-regolith);
|
|
84
90
|
border-radius: 6px;
|
|
85
|
-
box-shadow:
|
|
91
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
|
|
86
92
|
box-sizing: border-box;
|
|
87
93
|
color: var(--d2l-color-ferrite);
|
|
88
94
|
cursor: pointer;
|
|
@@ -90,7 +96,8 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
|
|
|
90
96
|
line-height: 1rem;
|
|
91
97
|
max-width: 320px;
|
|
92
98
|
min-width: 0;
|
|
93
|
-
outline:
|
|
99
|
+
outline: 1px solid var(--d2l-color-gypsum);
|
|
100
|
+
outline-offset: -1px;
|
|
94
101
|
transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
|
|
95
102
|
white-space: nowrap;
|
|
96
103
|
}
|
|
@@ -103,26 +110,13 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
|
|
|
103
110
|
padding: 0.25rem 0.6rem;
|
|
104
111
|
text-overflow: ellipsis;
|
|
105
112
|
}
|
|
106
|
-
|
|
107
|
-
:host(:focus-within:hover) .tag-list-item-container {
|
|
108
|
-
box-shadow: inset 0 0 0 2px var(--d2l-color-celestine), 0 2px 4px rgba(0, 0, 0, 0.03);
|
|
109
|
-
}
|
|
110
|
-
@supports selector(:has(a, b)) {
|
|
111
|
-
:host(:focus-within) .tag-list-item-container,
|
|
112
|
-
:host(:focus-within:hover) .tag-list-item-container {
|
|
113
|
-
box-shadow: inset 0 0 0 1px var(--d2l-color-gypsum), 0 2px 4px rgba(0, 0, 0, 0.03);
|
|
114
|
-
}
|
|
115
|
-
:host(:hover) .tag-list-item-container:has(:focus-visible),
|
|
116
|
-
.tag-list-item-container:has(:focus-visible) {
|
|
117
|
-
box-shadow: inset 0 0 0 2px var(--d2l-color-celestine), 0 2px 4px rgba(0, 0, 0, 0.03) !important;
|
|
118
|
-
}
|
|
119
|
-
}
|
|
113
|
+
${getFocusRingStyles(() => focusSelector)}
|
|
120
114
|
:host(:hover) .tag-list-item-container,
|
|
121
|
-
|
|
115
|
+
${unsafeCSS(focusSelector)} {
|
|
122
116
|
background-color: var(--d2l-color-sylvite);
|
|
123
117
|
}
|
|
124
|
-
:host(:hover) .tag-list-item-container {
|
|
125
|
-
|
|
118
|
+
:host(:hover) .tag-list-item-container:not(${unsafeCSS(focusSelector)}) {
|
|
119
|
+
outline-color: var(--d2l-color-mica);
|
|
126
120
|
}
|
|
127
121
|
|
|
128
122
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -153,6 +147,12 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
|
|
|
153
147
|
.d2l-heading-4 {
|
|
154
148
|
margin: 0 0 0.5rem 0;
|
|
155
149
|
}
|
|
150
|
+
@media (prefers-contrast: more) {
|
|
151
|
+
:host(:hover) .tag-list-item-container {
|
|
152
|
+
outline-offset: -2px;
|
|
153
|
+
outline-width: 2px;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
156
|
`];
|
|
157
157
|
}
|
|
158
158
|
|
package/helpers/focus.js
CHANGED
|
@@ -226,3 +226,22 @@ export function isFocusVisibleSupported() {
|
|
|
226
226
|
|
|
227
227
|
return _isFocusVisibleSupported;
|
|
228
228
|
}
|
|
229
|
+
|
|
230
|
+
let _isHasSelectorSupported;
|
|
231
|
+
|
|
232
|
+
export function isHasSelectorSupported() {
|
|
233
|
+
if (_isHasSelectorSupported === undefined) {
|
|
234
|
+
const style = document.createElement('style');
|
|
235
|
+
try {
|
|
236
|
+
document.head.appendChild(style);
|
|
237
|
+
style.sheet.insertRule(':has(a) { color: inherit; }');
|
|
238
|
+
_isHasSelectorSupported = true;
|
|
239
|
+
} catch {
|
|
240
|
+
_isHasSelectorSupported = false;
|
|
241
|
+
} finally {
|
|
242
|
+
style.remove();
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
return _isHasSelectorSupported;
|
|
247
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.147.
|
|
3
|
+
"version": "3.147.3",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|