@brightspace-ui/core 3.97.2 → 3.98.0

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.
Files changed (8) hide show
  1. package/components/button/button-icon.js +4 -8
  2. package/components/button/button-move.js +2 -7
  3. package/components/button/button-styles.js +2 -2
  4. package/components/button/demo/button-icon.html +2 -1
  5. package/components/inputs/demo/input-text.html +2 -1
  6. package/components/inputs/input-search.js +1 -1
  7. package/components/popover/popover-mixin.js +1 -2
  8. package/package.json +1 -1
package/components/button/button-icon.js CHANGED
@@ -1,11 +1,10 @@
1
1
  import '../colors/colors.js';
2
2
  import '../icons/icon.js';
3
3
  import '../tooltip/tooltip.js';
4
- import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
4
+ import { css, html, LitElement, nothing } from 'lit';
5
5
  import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
6
6
  import { ButtonMixin } from './button-mixin.js';
7
7
  import { buttonStyles } from './button-styles.js';
8
- import { getFocusPseudoClass } from '../../helpers/focus.js';
9
8
  import { getUniqueId } from '../../helpers/uniqueId.js';
10
9
  import { ifDefined } from 'lit/directives/if-defined.js';
11
10
  import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
@@ -64,7 +63,6 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
64
63
  --d2l-button-icon-background-color: transparent;
65
64
  --d2l-button-icon-background-color-hover: var(--d2l-color-gypsum);
66
65
  --d2l-button-icon-border-radius: 0.3rem;
67
- --d2l-button-icon-focus-box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
68
66
  --d2l-button-icon-min-height: calc(2rem + 2px);
69
67
  --d2l-button-icon-min-width: calc(2rem + 2px);
70
68
  --d2l-button-icon-h-align: calc(((2rem + 2px - 0.9rem) / 2) * -1);
@@ -78,14 +76,15 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
78
76
  :host([translucent]) {
79
77
  --d2l-button-icon-background-color: rgba(0, 0, 0, 0.5);
80
78
  --d2l-button-icon-background-color-hover: var(--d2l-color-celestine);
81
- --d2l-button-icon-focus-box-shadow: inset 0 0 0 2px var(--d2l-color-celestine), inset 0 0 0 4px white;
79
+ --d2l-button-focus-color: white;
80
+ --d2l-button-focus-offset: -4px;
82
81
  --d2l-icon-fill-color: white;
83
82
  --d2l-button-icon-fill-color-hover: white;
84
83
  }
85
84
  :host([theme="dark"]) {
86
85
  --d2l-button-icon-background-color: transparent;
87
86
  --d2l-button-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
88
- --d2l-button-icon-focus-box-shadow: 0 0 0 2px black, 0 0 0 4px var(--d2l-color-celestine-plus-1);
87
+ --d2l-button-focus-color: var(--d2l-color-celestine-plus-1);
89
88
  --d2l-icon-fill-color: var(--d2l-color-sylvite);
90
89
  --d2l-button-icon-fill-color-hover: var(--d2l-color-sylvite);
91
90
  }
@@ -119,9 +118,6 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
119
118
  --d2l-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-color-tungsten));
120
119
  background-color: var(--d2l-button-icon-background-color-hover);
121
120
  }
122
- button:${unsafeCSS(getFocusPseudoClass())} {
123
- box-shadow: var(--d2l-button-icon-focus-box-shadow);
124
- }
125
121
 
126
122
  slot[name="icon"]::slotted(*) {
127
123
  display: none;
package/components/button/button-move.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import '../colors/colors.js';
2
2
  import '../icons/icon.js';
3
3
  import '../tooltip/tooltip.js';
4
- import { css, html, LitElement, unsafeCSS } from 'lit';
4
+ import { css, html, LitElement } from 'lit';
5
5
  import { buttonStyles } from './button-styles.js';
6
6
  import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
7
- import { getFocusPseudoClass } from '../../helpers/focus.js';
8
7
  import { getUniqueId } from '../../helpers/uniqueId.js';
9
8
  import { ifDefined } from 'lit/directives/if-defined.js';
10
9
  import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
@@ -93,7 +92,6 @@ class ButtonMove extends ThemeMixin(FocusMixin(RtlMixin(LitElement))) {
93
92
  :host {
94
93
  --d2l-button-move-background-color-focus: #ffffff;
95
94
  --d2l-button-move-icon-background-color-hover: var(--d2l-color-mica);
96
- --d2l-button-move-box-shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
97
95
  --d2l-icon-fill-color: var(--d2l-color-tungsten);
98
96
  display: inline-block;
99
97
  line-height: 0;
@@ -104,7 +102,7 @@ class ButtonMove extends ThemeMixin(FocusMixin(RtlMixin(LitElement))) {
104
102
  :host([theme="dark"]) {
105
103
  --d2l-button-move-background-color-focus: #000000;
106
104
  --d2l-button-move-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
107
- --d2l-button-move-box-shadow-focus: 0 0 0 2px black, 0 0 0 4px var(--d2l-color-celestine-plus-1);
105
+ --d2l-button-focus-color: var(--d2l-color-celestine-plus-1);
108
106
  --d2l-icon-fill-color: var(--d2l-color-sylvite);
109
107
  }
110
108
  button {
@@ -130,9 +128,6 @@ class ButtonMove extends ThemeMixin(FocusMixin(RtlMixin(LitElement))) {
130
128
  button:focus > d2l-icon {
131
129
  background-color: var(--d2l-button-move-icon-background-color-hover);
132
130
  }
133
- button:${unsafeCSS(getFocusPseudoClass())} {
134
- box-shadow: var(--d2l-button-move-box-shadow-focus);
135
- }
136
131
  .up-icon {
137
132
  border-top-left-radius: 0.3rem;
138
133
  border-top-right-radius: 0.3rem;
package/components/button/button-styles.js CHANGED
@@ -6,7 +6,6 @@ export const buttonStyles = css`
6
6
  button {
7
7
  border-radius: 0.3rem;
8
8
  border-style: none;
9
- box-shadow: 0 0 0 4px rgba(0, 0, 0, 0);
10
9
  box-sizing: border-box;
11
10
  cursor: pointer;
12
11
  display: inline-block;
@@ -23,6 +22,7 @@ export const buttonStyles = css`
23
22
  width: auto;
24
23
  }
25
24
  button:${unsafeCSS(getFocusPseudoClass())} {
26
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
25
+ outline: 2px solid var(--d2l-button-focus-color, var(--d2l-color-celestine));
26
+ outline-offset: var(--d2l-button-focus-offset, 2px);
27
27
  }
28
28
  `;
package/components/button/demo/button-icon.html CHANGED
@@ -55,7 +55,8 @@
55
55
  --d2l-button-icon-min-height: 1.5rem;
56
56
  --d2l-button-icon-min-width: 1.5rem;
57
57
  --d2l-button-icon-border-radius: 4px;
58
- --d2l-button-icon-focus-box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #006fbf;
58
+ --d2l-button-focus-color: #006fbf;
59
+ --d2l-button-focus-offset: 1px;
59
60
  }
60
61
  </style>
61
62
  </head>
package/components/inputs/demo/input-text.html CHANGED
@@ -15,7 +15,8 @@
15
15
  --d2l-button-icon-min-height: 1.8rem;
16
16
  --d2l-button-icon-min-width: 1.8rem;
17
17
  --d2l-button-icon-border-radius: 4px;
18
- --d2l-button-icon-focus-box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px var(--d2l-color-celestine);
18
+ --d2l-button-icon-focus-color: var(--d2l-color-celestine);
19
+ --d2l-button-icon-focus-offset: 1px;
19
20
  }
20
21
  d2l-icon[slot="left"], d2l-icon[slot="right"] {
21
22
  margin-left: 0.55rem;
package/components/inputs/input-search.js CHANGED
@@ -80,7 +80,7 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
80
80
  --d2l-button-icon-min-height: 1.5rem;
81
81
  --d2l-button-icon-min-width: 1.5rem;
82
82
  --d2l-button-icon-border-radius: 4px;
83
- --d2l-button-icon-focus-box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px var(--d2l-color-celestine);
83
+ --d2l-button-focus-offset: 1px;
84
84
  margin-left: 0.3rem;
85
85
  margin-right: 0.3rem;
86
86
  }
package/components/popover/popover-mixin.js CHANGED
@@ -954,8 +954,7 @@ export const PopoverMixin = superclass => class extends superclass {
954
954
  }
955
955
 
956
956
  const activeElement = getComposedActiveElement();
957
- if (isComposedAncestor(this, activeElement)
958
- || activeElement === this._opener) {
957
+ if (isComposedAncestor(this, activeElement) || isComposedAncestor(this._opener, activeElement)) {
959
958
  return;
960
959
  }
961
960
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.97.2",
3
+ "version": "3.98.0",
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",