@brightspace-ui/core 2.177.3 → 2.177.4

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 (19) hide show
  1. package/components/breadcrumbs/breadcrumbs.js +1 -1
  2. package/components/button/demo/button-icon.html +1 -1
  3. package/components/card/card-loading-shimmer.js +1 -1
  4. package/components/collapsible-panel/collapsible-panel.js +1 -1
  5. package/components/dropdown/demo/dropdown-context-menu.html +1 -1
  6. package/components/dropdown/demo/dropdown-more.html +1 -1
  7. package/components/expand-collapse/expand-collapse-content.js +1 -1
  8. package/components/html-block/html-block.js +11 -5
  9. package/components/inputs/input-select-styles.js +9 -9
  10. package/components/inputs/input-styles.js +3 -3
  11. package/components/inputs/input-textarea.js +1 -1
  12. package/components/offscreen/offscreen.js +2 -2
  13. package/components/status-indicator/demo/status-indicator.html +1 -1
  14. package/components/switch/switch-mixin.js +1 -1
  15. package/components/tag-list/tag-list.js +7 -3
  16. package/helpers/demo/prism.html +1 -1
  17. package/helpers/prism.js +2 -2
  18. package/package.json +3 -3
  19. package/templates/primary-secondary/primary-secondary.js +2 -2
package/components/breadcrumbs/breadcrumbs.js CHANGED
@@ -35,7 +35,7 @@ class Breadcrumbs extends LocalizeCoreElement(RtlMixin(LitElement)) {
35
35
  :host::after {
36
36
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(251, 252, 252));
37
37
  bottom: 0;
38
- content: '';
38
+ content: "";
39
39
  pointer-events: none;
40
40
  position: absolute;
41
41
  right: 0;
package/components/button/demo/button-icon.html CHANGED
@@ -17,7 +17,7 @@
17
17
  .ancestor-container::before {
18
18
  background-color: rgba(0, 0, 0, 0.03);
19
19
  box-sizing: border-box;
20
- content: 'visible-on-ancestor-target';
20
+ content: "visible-on-ancestor-target";
21
21
  font-size: 0.7rem;
22
22
  height: 100%;
23
23
  left: 0;
package/components/card/card-loading-shimmer.js CHANGED
@@ -36,7 +36,7 @@ class CardLoadingShimmer extends LitElement {
36
36
  animation: loadingShimmer 1.5s ease-in-out infinite;
37
37
  background: linear-gradient(90deg, rgba(249, 250, 251, 0.1), rgba(114, 119, 122, 0.1), rgba(249, 250, 251, 0.1));
38
38
  background-color: var(--d2l-color-regolith);
39
- content: '';
39
+ content: "";
40
40
  height: 100%;
41
41
  left: 0;
42
42
  position: absolute;
package/components/collapsible-panel/collapsible-panel.js CHANGED
@@ -215,7 +215,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
215
215
  }
216
216
  .d2l-collapsible-panel-header-actions::after {
217
217
  border-inline-end: 1px solid var(--d2l-color-mica);
218
- content: '';
218
+ content: "";
219
219
  display: flex;
220
220
  margin: 0.3rem;
221
221
  }
package/components/dropdown/demo/dropdown-context-menu.html CHANGED
@@ -18,7 +18,7 @@
18
18
  .ancestor-container::before {
19
19
  background-color: rgba(0, 0, 0, 0.03);
20
20
  box-sizing: border-box;
21
- content: 'visible-on-ancestor-target';
21
+ content: "visible-on-ancestor-target";
22
22
  font-size: 0.7rem;
23
23
  height: 100%;
24
24
  left: 0;
package/components/dropdown/demo/dropdown-more.html CHANGED
@@ -21,7 +21,7 @@
21
21
  .ancestor-container::before {
22
22
  background-color: rgba(0, 0, 0, 0.03);
23
23
  box-sizing: border-box;
24
- content: 'visible-on-ancestor-target';
24
+ content: "visible-on-ancestor-target";
25
25
  font-size: 0.7rem;
26
26
  height: 100%;
27
27
  left: 0;
package/components/expand-collapse/expand-collapse-content.js CHANGED
@@ -70,7 +70,7 @@ class ExpandCollapseContent extends LitElement {
70
70
  /* prevent margin colapse on slotted children */
71
71
  .d2l-expand-collapse-content-inner::before,
72
72
  .d2l-expand-collapse-content-inner::after {
73
- content: ' ';
73
+ content: " ";
74
74
  display: table;
75
75
  }
76
76
 
package/components/html-block/html-block.js CHANGED
@@ -76,16 +76,22 @@ export const htmlBlockContentStyles = css`
76
76
  ul, ul[type="disc"] {
77
77
  list-style-type: disc;
78
78
  }
79
- ul ul, ul ol,
80
- ol ul, ol ol {
79
+ ul ul,
80
+ ul ol,
81
+ ol ul,
82
+ ol ol {
81
83
  margin-bottom: 0;
82
84
  margin-top: 0;
83
85
  }
84
- ul ul, ol ul, ul[type="circle"] {
86
+ ul ul,
87
+ ol ul,
88
+ ul[type="circle"] {
85
89
  list-style-type: circle;
86
90
  }
87
- ul ul ul, ul ol ul,
88
- ol ul ul, ol ol ul,
91
+ ul ul ul,
92
+ ul ol ul,
93
+ ol ul ul,
94
+ ol ol ul,
89
95
  ul[type="square"] {
90
96
  list-style-type: square;
91
97
  }
package/components/inputs/input-select-styles.js CHANGED
@@ -25,7 +25,7 @@ export const selectStyles = css`
25
25
  max-height: calc(2rem + 2px);
26
26
  vertical-align: middle;
27
27
  }
28
- :host([dir='rtl']) .d2l-input-select {
28
+ :host([dir="rtl"]) .d2l-input-select {
29
29
  background-position: center left 17px;
30
30
  }
31
31
  .d2l-input-select,
@@ -43,10 +43,10 @@ export const selectStyles = css`
43
43
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDExIDciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEgMmw0LjUgNE0xMCAyTDUuNSA2IiBzdHJva2U9IiM1NjVBNUMiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+");
44
44
  padding-right: calc(2px + 0.8rem + 1px + 11px + 16px);
45
45
  }
46
- :host([dir='rtl']) .d2l-input-select,
47
- :host([dir='rtl']) .d2l-input-select:disabled,
48
- :host([dir='rtl']) .d2l-input-select:hover:disabled,
49
- :host([dir='rtl']) .d2l-input-select:focus:disabled {
46
+ :host([dir="rtl"]) .d2l-input-select,
47
+ :host([dir="rtl"]) .d2l-input-select:disabled,
48
+ :host([dir="rtl"]) .d2l-input-select:hover:disabled,
49
+ :host([dir="rtl"]) .d2l-input-select:focus:disabled {
50
50
  padding-left: calc(2px + 0.8rem + 1px + 11px + 16px);
51
51
  padding-right: 0.75rem;
52
52
  }
@@ -59,19 +59,19 @@ export const selectStyles = css`
59
59
  padding: calc(0.4rem - 1px) calc(0.75rem - 1px);
60
60
  padding-right: calc(2px + 0.8rem + 1px + 11px + 16px - 1px);
61
61
  }
62
- :host([dir='rtl']) .d2l-input-select:hover,
63
- :host([dir='rtl']) .d2l-input-select:focus {
62
+ :host([dir="rtl"]) .d2l-input-select:hover,
63
+ :host([dir="rtl"]) .d2l-input-select:focus {
64
64
  padding-left: calc(2px + 0.8rem + 1px + 11px + 16px - 1px);
65
65
  padding-right: calc(0.75rem - 1px);
66
66
  }
67
- .d2l-input-select[aria-invalid='true'] {
67
+ .d2l-input-select[aria-invalid="true"] {
68
68
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDExIDciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEgMmw0LjUgNE0xMCAyTDUuNSA2IiBzdHJva2U9IiM1NjVBNUMiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+"), url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBmaWxsPSIjY2QyMDI2IiBkPSJNMTcuNzkgMTUuMTFsLTctMTRhMiAyIDAgMCAwLTMuNTggMGwtNyAxNGExLjk3NSAxLjk3NSAwIDAgMCAuMDkgMS45NEEyIDIgMCAwIDAgMiAxOGgxNGExLjk5NCAxLjk5NCAwIDAgMCAxLjctLjk1IDEuOTY3IDEuOTY3IDAgMCAwIC4wOS0xLjk0ek05IDE2YTEuNSAxLjUgMCAxIDEgMS41LTEuNUExLjUgMS41IDAgMCAxIDkgMTZ6bS45OC00LjgwNmExIDEgMCAwIDEtMS45NiAwbC0uOTktNUExIDEgMCAwIDEgOC4wMSA1aDEuOTgzYTEgMSAwIDAgMSAuOTggMS4xOTR6Ii8+Cjwvc3ZnPgo=");
69
69
  background-position: center right 17px, center right calc(1px + 11px + 17px);
70
70
  background-repeat: no-repeat, no-repeat;
71
71
  background-size: 11px 7px, 0.8rem 0.8rem;
72
72
  border-color: var(--d2l-color-cinnabar);
73
73
  }
74
- :host([dir='rtl']) .d2l-input-select[aria-invalid='true'] {
74
+ :host([dir="rtl"]) .d2l-input-select[aria-invalid="true"] {
75
75
  background-position: center left 17px, center left calc(1px + 11px + 17px);
76
76
  }
77
77
  .d2l-input-select:disabled {
package/components/inputs/input-styles.js CHANGED
@@ -95,15 +95,15 @@ export const inputStyles = css`
95
95
  background-position: top calc(12px - 1px) right calc(18px - 1px);
96
96
  padding-right: calc(18px + 0.8rem - 1px);
97
97
  }
98
- :host([dir='rtl']) textarea.d2l-input[aria-invalid="true"] {
98
+ :host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"] {
99
99
  background-position: top 12px left 18px;
100
100
  padding: var(--d2l-input-padding, 0.75rem);
101
101
  padding-bottom: 0.5rem;
102
102
  padding-left: calc(18px + 0.8rem);
103
103
  padding-top: 0.5rem;
104
104
  }
105
- :host([dir='rtl']) textarea.d2l-input[aria-invalid="true"]:focus,
106
- :host([dir='rtl']) textarea.d2l-input[aria-invalid="true"]:hover {
105
+ :host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:focus,
106
+ :host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:hover {
107
107
  background-position: top calc(12px - 1px) left calc(18px - 1px);
108
108
  padding: var(--d2l-input-padding-focus, calc(0.75rem - 1px));
109
109
  padding-bottom: calc(0.5rem - 1px);
package/components/inputs/input-textarea.js CHANGED
@@ -143,7 +143,7 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
143
143
  .d2l-input-textarea-mirror[aria-invalid="true"] {
144
144
  padding-right: calc(18px + 0.8rem);
145
145
  }
146
- :host([dir='rtl']) .d2l-input-textarea-mirror[aria-invalid="true"] {
146
+ :host([dir="rtl"]) .d2l-input-textarea-mirror[aria-invalid="true"] {
147
147
  padding-left: calc(18px + 0.8rem);
148
148
  padding-right: 0.75rem;
149
149
  }
package/components/offscreen/offscreen.js CHANGED
@@ -2,14 +2,14 @@ import { css, html, LitElement } from 'lit';
2
2
  import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
3
3
 
4
4
  const offscreenStyleDeclarations = css`
5
- direction: var(--d2l-document-direction, ${document.dir === 'rtl' ? css`rtl` : css`ltr`});
5
+ direction: var(--d2l-document-direction, ${document.dir === 'rtl' ? css`rtl` : css`ltr`}); /* stylelint-disable-line @stylistic/string-quotes */
6
6
  height: 1px;
7
7
  inset-inline-start: -10000px;
8
- ${document.dir === 'rtl' ? css`right` : css`left`}: -10000px;
9
8
  overflow: hidden;
10
9
  position: absolute !important;
11
10
  white-space: nowrap;
12
11
  width: 1px;
12
+ ${document.dir === 'rtl' ? css`right` : css`left`}: -10000px;
13
13
  `;
14
14
 
15
15
  export const offscreenStyles = css`
package/components/status-indicator/demo/status-indicator.html CHANGED
@@ -16,7 +16,7 @@
16
16
  }
17
17
  .align-item.bullet::before {
18
18
  color: var(--d2l-color-tungsten);
19
- content: '\002022';
19
+ content: "\002022";
20
20
  margin-left: 5px;
21
21
  margin-right: 5px;
22
22
  }
package/components/switch/switch-mixin.js CHANGED
@@ -47,7 +47,7 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
47
47
  }
48
48
 
49
49
  .d2l-switch-container {
50
- background-color: var(--d2l-switch-container-background-color, '#fff');
50
+ background-color: var(--d2l-switch-container-background-color, #ffffff);
51
51
  border: 2px solid transparent;
52
52
  border-radius: 1rem;
53
53
  box-sizing: border-box;
package/components/tag-list/tag-list.js CHANGED
@@ -3,6 +3,7 @@ import { css, html, LitElement } from 'lit';
3
3
  import { announce } from '../../helpers/announce.js';
4
4
  import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
5
5
  import { classMap } from 'lit/directives/class-map.js';
6
+ import { getComposedActiveElement } from '../../helpers/focus.js';
6
7
  import { getOffsetParent } from '../../helpers/dom.js';
7
8
  import { InteractiveMixin } from '../../mixins/interactive/interactive-mixin.js';
8
9
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -359,6 +360,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
359
360
  }
360
361
 
361
362
  async _handleResize() {
363
+ const refocus = getComposedActiveElement();
362
364
  this._contentReady = false;
363
365
  this._chompIndex = 10000;
364
366
  await this.updateComplete;
@@ -374,10 +376,13 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
374
376
  this._chomp();
375
377
  }
376
378
  this._contentReady = true;
379
+ await this.updateComplete;
380
+ refocus.focus?.();
377
381
  }
378
382
 
379
383
  async _handleSlotChange() {
380
384
  if (!this._hasResized) return;
385
+ const refocus = getComposedActiveElement();
381
386
  this._contentReady = false;
382
387
  await this.updateComplete;
383
388
 
@@ -400,6 +405,8 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
400
405
  this._contentReady = true;
401
406
  this._items[0].setAttribute('keyboard-tooltip-item', true);
402
407
  if (this._hasShownKeyboardTooltip) this._items[0].setAttribute('keyboard-tooltip-shown', true);
408
+ await this.updateComplete;
409
+ refocus.focus?.();
403
410
  }
404
411
 
405
412
  async _toggleHiddenTagVisibility(e) {
@@ -409,14 +416,11 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
409
416
 
410
417
  const isMoreButton = e.target.classList.contains('d2l-tag-list-button-show-more');
411
418
  await this.updateComplete;
412
- await new Promise((r) => setTimeout(r, 100)); // wait for items to appear before focusing
413
419
  if (isMoreButton) {
414
420
  this._items[this._chompIndex].focus();
415
421
  } else {
416
422
  this.shadowRoot.querySelector('.d2l-tag-list-button')?.focus();
417
423
  }
418
- /** @ignore */
419
- this.dispatchEvent(new CustomEvent('d2l-tag-list-focus', { bubbles: false, composed: false }));
420
424
  }
421
425
  }
422
426
 
package/helpers/demo/prism.html CHANGED
@@ -93,7 +93,7 @@ SET @Donuts = 'Yummy'; /* keyword, variable, string */
93
93
  flex: none;
94
94
  }
95
95
  table {
96
- font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
96
+ font-family: "Lato", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
97
97
  font-size: 16px;
98
98
  }
99
99
  th {
package/helpers/prism.js CHANGED
@@ -153,7 +153,7 @@ export const codeStyles = css`
153
153
  pre[class*="language-"].d2l-code,
154
154
  pre[class*="language-"].d2l-code > code[class*="language-"],
155
155
  code[class*="language-"].d2l-code {
156
- font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
156
+ font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
157
157
  line-height: 1.5;
158
158
  text-shadow: none;
159
159
  }
@@ -189,7 +189,7 @@ export const codeStyles = css`
189
189
  pre[class*="language-"].d2l-code::before {
190
190
  color: var(--d2l-code-language);
191
191
  content: attr(data-language);
192
- font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
192
+ font-family: "Lato", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
193
193
  margin: 0.1rem 0.4rem;
194
194
  position: absolute;
195
195
  right: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.177.3",
3
+ "version": "2.177.4",
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",
@@ -44,7 +44,7 @@
44
44
  "license": "Apache-2.0",
45
45
  "devDependencies": {
46
46
  "@babel/eslint-parser": "^7",
47
- "@brightspace-ui/stylelint-config": "^0.8",
47
+ "@brightspace-ui/stylelint-config": "^1",
48
48
  "@brightspace-ui/testing": "^1",
49
49
  "@open-wc/semantic-dom-diff": "^0.20",
50
50
  "@rollup/plugin-dynamic-import-vars": "^2",
@@ -61,7 +61,7 @@
61
61
  "rollup-plugin-copy": "^3",
62
62
  "rollup-plugin-delete": "^2",
63
63
  "sinon": "^17",
64
- "stylelint": "^15"
64
+ "stylelint": "^16"
65
65
  },
66
66
  "dependencies": {
67
67
  "@brightspace-ui/intl": "^3",
package/templates/primary-secondary/primary-secondary.js CHANGED
@@ -663,7 +663,7 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
663
663
  /* prevent margin colapse on slotted children */
664
664
  aside::before,
665
665
  aside::after {
666
- content: ' ';
666
+ content: " ";
667
667
  display: table;
668
668
  }
669
669
  [data-background-shading="primary"] > main,
@@ -749,7 +749,7 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
749
749
  .d2l-template-primary-secondary-divider-handle-line::after {
750
750
  background-color: var(--d2l-color-galena);
751
751
  border-radius: 0.05rem;
752
- content: '';
752
+ content: "";
753
753
  display: inline-block;
754
754
  width: 0.1rem;
755
755
  }