@brightspace-ui/core 3.143.0 → 3.143.1

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,10 +1,10 @@
1
1
  import '../colors/colors.js';
2
2
  import '../tooltip/tooltip.js';
3
3
  import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
4
+ import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
4
5
  import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
5
6
  import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
6
7
  import { getFlag } from '../../helpers/flags.js';
7
- import { getFocusPseudoClass } from '../../helpers/focus.js';
8
8
  import { getUniqueId } from '../../helpers/uniqueId.js';
9
9
  import { ifDefined } from 'lit/directives/if-defined.js';
10
10
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -105,12 +105,7 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
105
105
  0% { position: absolute; }
106
106
  100% { position: static; }
107
107
  }
108
-
109
- button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
110
- background-color: white;
111
- border-radius: 0.3rem;
112
- box-shadow: 0 0 0 2px var(--d2l-button-add-hover-focus-color);
113
- }
108
+ ${getFocusRingStyles(pseudoClass => `button:${pseudoClass} d2l-button-add-icon-text`, { extraStyles: css`background-color: white; border-radius: 0.3rem;` })}
114
109
  /* remove when GAUD-7495-add-button-white-background is cleaned up */
115
110
  :host(:not([_white-background-add-button])) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
116
111
  background-color: transparent;
@@ -160,6 +155,15 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
160
155
  }
161
156
  }
162
157
  }
158
+ @media (prefers-contrast: more) {
159
+ .line {
160
+ background-color: ButtonBorder;
161
+ }
162
+ button:hover .line,
163
+ button:focus .line {
164
+ background-color: Highlight !important;
165
+ }
166
+ }
163
167
  `;
164
168
  }
165
169
 
@@ -215,6 +219,8 @@ class ButtonAddIconText extends VisibleOnAncestorMixin(LitElement) {
215
219
  static get styles() {
216
220
  return [visibleOnAncestorStyles, css`
217
221
  :host {
222
+ --d2l-focus-ring-offset: 0;
223
+ --d2l-focus-ring-color: var(--d2l-button-add-hover-focus-color);
218
224
  --d2l-button-add-icon-text-color: var(--d2l-color-galena);
219
225
  align-items: center;
220
226
  display: flex;
@@ -1,6 +1,7 @@
1
1
  import '../colors/colors.js';
2
2
  import { css, html, LitElement, nothing } from 'lit';
3
3
  import { classMap } from 'lit/directives/class-map.js';
4
+ import { getFocusRingStyles } from '../../helpers/focus.js';
4
5
  import { ifDefined } from 'lit/directives/if-defined.js';
5
6
  import { offscreenStyles } from '../offscreen/offscreen.js';
6
7
  import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
@@ -176,23 +177,17 @@ class Card extends LitElement {
176
177
 
177
178
  :host([subtle]) {
178
179
  border: none;
180
+ }
181
+ :host([subtle][href]) {
179
182
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03);
180
183
  }
181
- :host(:hover) {
184
+ :host([href]:not([_active]):hover) {
182
185
  box-shadow: 0 2px 14px 1px rgba(0, 0, 0, 0.06);
183
186
  }
184
- :host([subtle]:hover) {
187
+ :host([subtle][href]:not([_active]):hover) {
185
188
  box-shadow: 0 4px 18px 2px rgba(0, 0, 0, 0.06);
186
189
  }
187
- :host([_active]) {
188
- border-color: transparent;
189
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
190
- }
191
- :host([_active]:hover),
192
- :host([subtle][_active]:hover) {
193
- border-color: transparent;
194
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
195
- }
190
+ ${getFocusRingStyles(() => ':host([_active])', { 'extraStyles': css`border-color: transparent;` })}
196
191
  /* .d2l-card-link-container-hover is used to only color/underline when
197
192
  hovering the anchor; these styles are not applied when hovering actions */
198
193
  :host([href]) .d2l-card-link-container-hover,
@@ -208,15 +203,16 @@ class Card extends LitElement {
208
203
  :host([_dropdown-action-open]) {
209
204
  z-index: 2;
210
205
  }
211
- :host(:not([href])),
212
- :host([subtle]:not([href])) {
213
- box-shadow: none;
214
- }
215
206
  @media (prefers-reduced-motion: no-preference) {
216
207
  :host {
217
208
  transition: box-shadow 0.2s;
218
209
  }
219
210
  }
211
+ @media (prefers-contrast: more) {
212
+ :host([subtle]) {
213
+ border: 1px solid var(--d2l-color-gypsum);
214
+ }
215
+ }
220
216
  `];
221
217
  }
222
218
 
@@ -1,9 +1,9 @@
1
1
  import '../colors/colors.js';
2
2
  import '../icons/icon.js';
3
- import { css, html, LitElement, unsafeCSS } from 'lit';
3
+ import { css, html, LitElement } from 'lit';
4
4
  import { CountBadgeMixin } from './count-badge-mixin.js';
5
5
  import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
6
- import { getFocusPseudoClass } from '../../helpers/focus.js';
6
+ import { getFocusRingStyles } from '../../helpers/focus.js';
7
7
  import { getUniqueId } from '../../helpers/uniqueId.js';
8
8
  import { ifDefined } from 'lit/directives/if-defined.js';
9
9
 
@@ -24,13 +24,7 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
24
24
 
25
25
  static get styles() {
26
26
  return [super.styles, css`
27
- :host([focus-ring]) d2l-icon,
28
- :host(:${unsafeCSS(getFocusPseudoClass())}) d2l-icon,
29
- d2l-icon:${unsafeCSS(getFocusPseudoClass())} {
30
- box-shadow: 0 0 0 2px var(--d2l-color-celestine);
31
- outline: none;
32
- }
33
-
27
+ ${getFocusRingStyles(pseudoClass => `:host([focus-ring]) d2l-icon, d2l-icon:${pseudoClass}`)}
34
28
  :host {
35
29
  /* for long numbers, center the number on the icon */
36
30
  --d2l-count-badge-icon-padding: calc(-50% + (var(--d2l-count-badge-icon-height) / 2) + 2px);
@@ -66,6 +60,7 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
66
60
  }
67
61
 
68
62
  d2l-icon {
63
+ --d2l-focus-ring-offset: 0;
69
64
  border: 2px solid transparent;
70
65
  border-radius: 6px;
71
66
  }
@@ -1,8 +1,8 @@
1
1
  import '../colors/colors.js';
2
- import { css, html, LitElement, unsafeCSS } from 'lit';
2
+ import { css, html, LitElement } from 'lit';
3
3
  import { CountBadgeMixin } from './count-badge-mixin.js';
4
4
  import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
5
- import { getFocusPseudoClass } from '../../helpers/focus.js';
5
+ import { getFocusRingStyles } from '../../helpers/focus.js';
6
6
  import { getUniqueId } from '../../helpers/uniqueId.js';
7
7
  import { ifDefined } from 'lit/directives/if-defined.js';
8
8
 
@@ -10,24 +10,18 @@ class CountBadge extends FocusMixin(CountBadgeMixin(LitElement)) {
10
10
 
11
11
  static get styles() {
12
12
  return [super.styles, css`
13
- :host([focus-ring]) .d2l-count-badge-wrapper,
14
- :host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-count-badge-wrapper,
15
- .d2l-count-badge-wrapper:${unsafeCSS(getFocusPseudoClass())} {
16
- box-shadow: 0 0 0 2px var(--d2l-color-celestine);
17
- }
18
-
13
+ ${getFocusRingStyles(pseudoClass => `:host([focus-ring]) .d2l-count-badge-wrapper, .d2l-count-badge-wrapper:${pseudoClass}`)}
19
14
  .d2l-count-badge-wrapper {
15
+ --d2l-focus-ring-offset: 0;
20
16
  border: 2px solid transparent;
21
17
  }
22
18
 
23
19
  :host([size="small"]) .d2l-count-badge-wrapper {
24
20
  border-radius: 0.65rem;
25
- outline: none;
26
21
  }
27
22
 
28
23
  :host([size="large"]) .d2l-count-badge-wrapper {
29
24
  border-radius: 0.8rem;
30
- outline: none;
31
25
  }
32
26
  `];
33
27
  }
@@ -78,7 +78,7 @@ class DemoSnippet extends LitElement {
78
78
  d2l-dropdown.settings-dropdown {
79
79
  background-color: white;
80
80
  border-radius: 6px;
81
- box-shadow: 0 0 0 1px var(--d2l-color-celestine-minus-1);
81
+ outline: 1px solid var(--d2l-color-celestine-minus-1);
82
82
  position: fixed;
83
83
  right: 1rem;
84
84
  top: -0.25rem;
@@ -1,7 +1,7 @@
1
1
  import '../colors/colors.js';
2
2
  import '../icons/icon.js';
3
- import { css, html, LitElement, unsafeCSS } from 'lit';
4
- import { getFocusPseudoClass } from '../../helpers/focus.js';
3
+ import { css, html, LitElement } from 'lit';
4
+ import { getFocusRingStyles } from '../../helpers/focus.js';
5
5
  import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
6
6
  import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
7
7
 
@@ -13,11 +13,10 @@ let focusStyleSheet;
13
13
  function getFocusStyleSheet() {
14
14
  if (!focusStyleSheet) {
15
15
  focusStyleSheet = new CSSStyleSheet();
16
- focusStyleSheet.replaceSync(css`
17
- .d2l-scroll-wrapper-focus:${unsafeCSS(getFocusPseudoClass())} {
18
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine), 0 2px 12px 0 rgba(0, 0, 0, 0.15);
19
- outline: none;
20
- }`);
16
+ focusStyleSheet.replaceSync(getFocusRingStyles(
17
+ '.d2l-scroll-wrapper-focus',
18
+ { extraStyles: css`box-shadow: 0 0 0 2px #ffffff, 0 2px 12px 0 rgba(0, 0, 0, 0.15);` }
19
+ ));
21
20
  }
22
21
  return focusStyleSheet;
23
22
  }
@@ -150,8 +150,9 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
150
150
  display: none;
151
151
  }
152
152
  .d2l-switch-inner:hover, .switch-hover {
153
- border-color: var(--d2l-color-celestine);
154
- box-shadow: 0 0 0 1px var(--d2l-color-celestine) inset;
153
+ border-color: transparent;
154
+ outline: 2px solid var(--d2l-color-celestine);
155
+ outline-offset: -2px;
155
156
  }
156
157
  @media (prefers-reduced-motion: reduce) {
157
158
  .d2l-switch-toggle,
@@ -3,10 +3,10 @@ import '../dropdown/dropdown.js';
3
3
  import '../dropdown/dropdown-menu.js';
4
4
  import '../icons/icon.js';
5
5
  import '../menu/menu.js';
6
- import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
6
+ import { css, html, LitElement, nothing } from 'lit';
7
7
  import { classMap } from 'lit/directives/class-map.js';
8
8
  import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
9
- import { getFocusPseudoClass } from '../../helpers/focus.js';
9
+ import { getFocusRingStyles } from '../../helpers/focus.js';
10
10
  import { getUniqueId } from '../../helpers/uniqueId.js';
11
11
  import { ifDefined } from 'lit/directives/if-defined.js';
12
12
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -116,11 +116,7 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
116
116
  button:hover {
117
117
  background-color: var(--d2l-color-gypsum);
118
118
  }
119
- button:focus-visible,
120
- button:${unsafeCSS(getFocusPseudoClass())} {
121
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
122
- outline-style: none;
123
- }
119
+ ${getFocusRingStyles('button', { extraStyles: css`box-shadow: 0 0 0 2px #ffffff;` })}
124
120
  d2l-icon {
125
121
  margin-inline-start: 0.6rem;
126
122
  }
@@ -18,7 +18,7 @@ class TabCustom extends TabMixin(LitElement) {
18
18
  }
19
19
  ${getFocusRingStyles(
20
20
  pseudoClass => `:host(:${pseudoClass}) .d2l-tab-custom-content`,
21
- { extraStyles: 'border-radius: 0.3rem; color: var(--d2l-color-celestine);' }
21
+ { extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` }
22
22
  )}
23
23
  `];
24
24
 
@@ -1,7 +1,7 @@
1
1
  import '../colors/colors.js';
2
- import { css, html, LitElement, unsafeCSS } from 'lit';
2
+ import { css, html, LitElement } from 'lit';
3
3
  import { classMap } from 'lit/directives/class-map.js';
4
- import { getFocusPseudoClass } from '../../helpers/focus.js';
4
+ import { getFocusRingStyles } from '../../helpers/focus.js';
5
5
  import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
6
6
 
7
7
  const keyCodes = {
@@ -32,6 +32,7 @@ class Tab extends SkeletonMixin(LitElement) {
32
32
  vertical-align: middle;
33
33
  }
34
34
  .d2l-tab-text {
35
+ --d2l-focus-ring-offset: 0;
35
36
  margin: 0.5rem;
36
37
  overflow: hidden;
37
38
  padding: 0.1rem;
@@ -67,11 +68,7 @@ class Tab extends SkeletonMixin(LitElement) {
67
68
  margin-inline-start: 0;
68
69
  width: calc(100% - 0.6rem);
69
70
  }
70
- :host(:${unsafeCSS(getFocusPseudoClass())}) > .d2l-tab-text {
71
- border-radius: 0.3rem;
72
- box-shadow: 0 0 0 2px var(--d2l-color-celestine);
73
- color: var(--d2l-color-celestine);
74
- }
71
+ ${getFocusRingStyles(pseudoClass => `:host(:${pseudoClass}) > .d2l-tab-text`, { extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` })}
75
72
  :host([aria-selected="true"]:focus) {
76
73
  text-decoration: none;
77
74
  }
@@ -4,10 +4,10 @@ import '../../helpers/queueMicrotask.js';
4
4
  import './tab-internal.js';
5
5
  import { css, html, LitElement, unsafeCSS } from 'lit';
6
6
  import { cssEscape, findComposedAncestor, getOffsetParent } from '../../helpers/dom.js';
7
+ import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
7
8
  import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
8
9
  import { bodyCompactStyles } from '../typography/styles.js';
9
10
  import { classMap } from 'lit/directives/class-map.js';
10
- import { getFocusPseudoClass } from '../../helpers/focus.js';
11
11
  import { ifDefined } from 'lit/directives/if-defined.js';
12
12
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
13
13
  import { repeat } from 'lit/directives/repeat.js';
@@ -159,9 +159,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
159
159
  .d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
160
160
  background-color: var(--d2l-color-gypsum);
161
161
  }
162
- .d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
163
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
164
- }
162
+ ${getFocusRingStyles('.d2l-tabs-scroll-button')}
165
163
  :host([skeleton]) .d2l-tabs-scroll-button {
166
164
  visibility: hidden;
167
165
  }
@@ -1860,16 +1860,19 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
1860
1860
  position: relative;
1861
1861
  }
1862
1862
  .d2l-card-link-container {
1863
- border-radius: 6px;
1864
1863
  flex-basis: auto;
1865
1864
  flex-grow: 1;
1866
1865
  flex-shrink: 1;
1867
- overflow: hidden;
1868
1866
  width: 100%; /* required for Legacy-Edge and FF when align-items: flex-start is specified */
1869
1867
  }
1870
1868
  .d2l-card-link-text {
1871
1869
  display: inline-block;
1872
1870
  }
1871
+ .d2l-card-header {
1872
+ border-start-end-radius: 6px;
1873
+ border-start-start-radius: 6px;
1874
+ overflow: hidden;
1875
+ }
1873
1876
 
1874
1877
  a {
1875
1878
  bottom: -1px;
@@ -1906,22 +1909,14 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
1906
1909
  padding-bottom: 1.2rem;
1907
1910
  }
1908
1911
  .d2l-card-actions {
1912
+ inset-inline-end: 0.6rem;
1909
1913
  position: absolute;
1910
- right: 0.6rem;
1911
1914
  top: 0.6rem;
1912
1915
  /* this must be higher than footer z-index so dropdowns will be on top */
1913
1916
  z-index: 3;
1914
1917
  }
1915
- :host([dir="rtl"]) .d2l-card-actions {
1916
- left: 0.6rem;
1917
- right: auto;
1918
- }
1919
1918
  .d2l-card-actions ::slotted(*) {
1920
- margin-left: 0.3rem;
1921
- }
1922
- :host([dir="rtl"]) .d2l-card-actions ::slotted(*) {
1923
- margin-left: 0;
1924
- margin-right: 0.3rem;
1919
+ margin-inline-start: 0.3rem;
1925
1920
  }
1926
1921
  .d2l-card-badge {
1927
1922
  line-height: 0;
@@ -1950,23 +1945,17 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
1950
1945
 
1951
1946
  :host([subtle]) {
1952
1947
  border: none;
1948
+ }
1949
+ :host([subtle][href]) {
1953
1950
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03);
1954
1951
  }
1955
- :host(:hover) {
1952
+ :host([href]:not([_active]):hover) {
1956
1953
  box-shadow: 0 2px 14px 1px rgba(0, 0, 0, 0.06);
1957
1954
  }
1958
- :host([subtle]:hover) {
1955
+ :host([subtle][href]:not([_active]):hover) {
1959
1956
  box-shadow: 0 4px 18px 2px rgba(0, 0, 0, 0.06);
1960
1957
  }
1961
- :host([_active]) {
1962
- border-color: transparent;
1963
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
1964
- }
1965
- :host([_active]:hover),
1966
- :host([subtle][_active]:hover) {
1967
- border-color: transparent;
1968
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
1969
- }
1958
+ ${getFocusRingStyles(() => ':host([_active])', {'extraStyles': css`border-color: transparent;`})}
1970
1959
  /* .d2l-card-link-container-hover is used to only color/underline when
1971
1960
  hovering the anchor; these styles are not applied when hovering actions */
1972
1961
  :host([href]) .d2l-card-link-container-hover,
@@ -1982,21 +1971,14 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
1982
1971
  :host([_dropdown-action-open]) {
1983
1972
  z-index: 2;
1984
1973
  }
1985
- :host(:not([href])),
1986
- :host([subtle]:not([href])) {
1987
- box-shadow: none;
1988
- transform: none;
1989
- }
1990
1974
  @media (prefers-reduced-motion: no-preference) {
1991
1975
  :host {
1992
- transition: transform 300ms ease-out 50ms, box-shadow 0.2s;
1976
+ transition: box-shadow 0.2s;
1993
1977
  }
1994
-
1995
- :host(:hover),
1996
- :host([subtle]:hover),
1997
- :host([_active]:hover),
1998
- :host([subtle][_active]:hover) {
1999
- transform: translateY(-4px);
1978
+ }
1979
+ @media (prefers-contrast: more) {
1980
+ :host([subtle]) {
1981
+ border: 1px solid var(--d2l-color-gypsum);;
2000
1982
  }
2001
1983
  }
2002
1984
  `];
package/helpers/focus.js CHANGED
@@ -73,7 +73,7 @@ export function getFocusRingStyles(selector, { applyOnHover = false, extraStyles
73
73
  }
74
74
  @media (prefers-contrast: more) {
75
75
  ${cssSelector} {
76
- outline-color: var(--d2l-focus-ring-color, Highlight);
76
+ outline-color: Highlight;
77
77
  }
78
78
  }`;
79
79
  }
package/lang/ar.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "إغلاق التنبيه",
4
3
  "components.breadcrumbs.breadcrumb": "شريط التنقل",
5
4
  "components.button-add.addItem": "إضافة عنصر",
package/lang/cy.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "Cau Hysbysiad",
4
3
  "components.breadcrumbs.breadcrumb": "Briwsionyn Bara",
5
4
  "components.button-add.addItem": "Ychwanegu Eitem",
package/lang/da.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "Luk besked",
4
3
  "components.breadcrumbs.breadcrumb": "Brødkrumme",
5
4
  "components.button-add.addItem": "Tilføj element",
package/lang/de.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "Benachrichtigung schließen",
4
3
  "components.breadcrumbs.breadcrumb": "Brotkrümelnavigation",
5
4
  "components.button-add.addItem": "Element hinzufügen",
package/lang/en-gb.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "Close Alert",
4
3
  "components.breadcrumbs.breadcrumb": "Breadcrumb",
5
4
  "components.button-add.addItem": "Add Item",
package/lang/en.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "Close Alert",
4
3
  "components.breadcrumbs.breadcrumb": "Breadcrumb",
5
4
  "components.button-add.addItem": "Add Item",
package/lang/es-es.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "Cerrar alerta",
4
3
  "components.breadcrumbs.breadcrumb": "Ruta de navegación",
5
4
  "components.button-add.addItem": "Agregar elemento",
package/lang/es.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "Cerrar alerta",
4
3
  "components.breadcrumbs.breadcrumb": "Ruta de navegación",
5
4
  "components.button-add.addItem": "Agregar elemento",
package/lang/fr-fr.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "Fermer l’alerte",
4
3
  "components.breadcrumbs.breadcrumb": "Chemin de navigation",
5
4
  "components.button-add.addItem": "Ajouter un élément",
package/lang/fr.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "Fermer l’alerte",
4
3
  "components.breadcrumbs.breadcrumb": "Chemin de navigation",
5
4
  "components.button-add.addItem": "Ajouter un élément",
package/lang/haw.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "Pani i ka makaʻala",
4
3
  "components.breadcrumbs.breadcrumb": "Palapalapala",
5
4
  "components.button-add.addItem": "Pākuʻi Mea",
package/lang/hi.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "अलर्ट बंद करें",
4
3
  "components.breadcrumbs.breadcrumb": "ब्रेडक्रंब",
5
4
  "components.button-add.addItem": "आइटम जोड़ें",
package/lang/ja.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "アラートを閉じる",
4
3
  "components.breadcrumbs.breadcrumb": "階層",
5
4
  "components.button-add.addItem": "項目の追加",
package/lang/ko.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "경보 닫기",
4
3
  "components.breadcrumbs.breadcrumb": "이동 경로",
5
4
  "components.button-add.addItem": "항목 추가",
package/lang/mi.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "Kati Matohi",
4
3
  "components.breadcrumbs.breadcrumb": "Pānui",
5
4
  "components.button-add.addItem": "Tāpiri Tūemi",
package/lang/nl.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "Waarschuwing sluiten",
4
3
  "components.breadcrumbs.breadcrumb": "Kruimelpad",
5
4
  "components.button-add.addItem": "Item toevoegen",
package/lang/pt.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "Fechar alerta",
4
3
  "components.breadcrumbs.breadcrumb": "Auxiliar de navegação",
5
4
  "components.button-add.addItem": "Adicionar item",
package/lang/sv.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "Stängningsvarning",
4
3
  "components.breadcrumbs.breadcrumb": "Sökväg",
5
4
  "components.button-add.addItem": "Lägg till objekt",
package/lang/tr.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "Kapatma Uyarısı",
4
3
  "components.breadcrumbs.breadcrumb": "İçerik Haritası",
5
4
  "components.button-add.addItem": "Öğe Ekle",
package/lang/zh-cn.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "关闭提醒",
4
3
  "components.breadcrumbs.breadcrumb": "痕迹导航",
5
4
  "components.button-add.addItem": "添加项目",
package/lang/zh-tw.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export default {
2
- "__test__": "This will be removed in a follow-up PR (before translation)",
3
2
  "components.alert.close": "關閉警示",
4
3
  "components.breadcrumbs.breadcrumb": "導覽路徑",
5
4
  "components.button-add.addItem": "新增項目",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.143.0",
3
+ "version": "3.143.1",
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",
@@ -3,9 +3,9 @@ import '../../components/icons/icon-custom.js';
3
3
  import '../../components/icons/icon.js';
4
4
  import '../../components/offscreen/offscreen.js';
5
5
  import { css, html, LitElement, unsafeCSS } from 'lit';
6
+ import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
6
7
  import { classMap } from 'lit/directives/class-map.js';
7
8
  import { formatPercent } from '@brightspace-ui/intl';
8
- import { getFocusPseudoClass } from '../../helpers/focus.js';
9
9
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
10
10
  import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
11
11
  import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
@@ -939,11 +939,7 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
939
939
  color: white;
940
940
  display: block;
941
941
  }
942
- .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-mobile {
943
- box-shadow: 0 0 0 0.1rem white, 0 0 0 0.2rem var(--d2l-color-celestine);
944
- right: 0.2rem;
945
- }
946
-
942
+ ${getFocusRingStyles(pseudoClass => `.d2l-template-primary-secondary-divider:${pseudoClass} .d2l-template-primary-secondary-divider-handle-mobile`, { extraStyles: css`right: 0.2rem; box-shadow: 0 0 0 2px #ffffff;` })}
947
943
  .d2l-template-primary-secondary-divider-shadow {
948
944
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
949
945
  display: block;