@brightspace-ui/core 1.207.0 → 1.207.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 (33) hide show
  1. package/README.md +1 -1
  2. package/components/alert/demo/alert-toast.html +0 -2
  3. package/components/alert/demo/alert.html +0 -2
  4. package/components/button/demo/button-icon.html +4 -4
  5. package/components/button/demo/floating-buttons-in-frame.html +9 -9
  6. package/components/button/demo/floating-buttons-in-tabs.html +40 -41
  7. package/components/card/demo/card.html +18 -18
  8. package/components/dialog/README.md +1 -2
  9. package/components/dropdown/README.md +9 -17
  10. package/components/dropdown/demo/dropdown-context-menu.html +7 -7
  11. package/components/dropdown/demo/dropdown-menu.html +6 -6
  12. package/components/dropdown/demo/dropdown-more.html +4 -4
  13. package/components/dropdown/dropdown-content-mixin.js +1 -2
  14. package/components/dropdown/dropdown-opener-mixin.js +1 -1
  15. package/components/filter/README.md +4 -7
  16. package/components/focus-trap/demo/focus-trap.html +1 -1
  17. package/components/inputs/demo/input-checkbox.html +2 -2
  18. package/components/inputs/demo/input-radio.html +1 -1
  19. package/components/inputs/docs/input-date-time.md +7 -13
  20. package/components/inputs/input-date-time.js +1 -1
  21. package/components/list/demo/list-item-layouts.html +1 -1
  22. package/components/list/demo/list.html +1 -1
  23. package/components/menu/demo/checkbox-menu.html +2 -2
  24. package/components/menu/demo/menu.html +4 -4
  25. package/components/menu/demo/radio-menu.html +2 -2
  26. package/components/meter/demo/meter.html +8 -8
  27. package/components/selection/demo/selection.html +1 -1
  28. package/components/status-indicator/demo/status-indicator.html +4 -4
  29. package/components/table/demo/table.html +1 -1
  30. package/components/tooltip/demo/tooltip.html +2 -2
  31. package/helpers/demo/gestures.html +1 -1
  32. package/mixins/async-container/demo/async-container.html +1 -1
  33. package/package.json +4 -4
package/README.md CHANGED
@@ -141,7 +141,7 @@ npx mocha './**/*.visual-diff.js' -t 10000 --require esm --golden
141
141
 
142
142
  > TL;DR: Commits prefixed with `fix:` and `feat:` will trigger patch and minor releases when merged to `main`. Read on for more details...
143
143
 
144
- The [sematic-release GitHub Action](https://github.com/BrightspaceUI/actions/tree/master/semantic-release) is called from the `release.yml` GitHub Action workflow to handle version changes and releasing.
144
+ The [semantic-release GitHub Action](https://github.com/BrightspaceUI/actions/tree/master/semantic-release) is called from the `release.yml` GitHub Action workflow to handle version changes and releasing.
145
145
 
146
146
  ### Version Changes
147
147
 
package/components/alert/demo/alert-toast.html CHANGED
@@ -10,8 +10,6 @@
10
10
  import '../../demo/demo-page.js';
11
11
  import '../alert-toast.js';
12
12
  </script>
13
- <style>
14
- </style>
15
13
  </head>
16
14
 
17
15
  <body unresolved>
package/components/alert/demo/alert.html CHANGED
@@ -9,8 +9,6 @@
9
9
  import '../../demo/demo-page.js';
10
10
  import '../alert.js';
11
11
  </script>
12
- <style>
13
- </style>
14
12
  </head>
15
13
 
16
14
  <body unresolved>
package/components/button/demo/button-icon.html CHANGED
@@ -14,14 +14,14 @@
14
14
  position: relative;
15
15
  }
16
16
  .ancestor-container::before {
17
- background-color: rgba(0,0,0,0.03);
17
+ background-color: rgba(0, 0, 0, 0.03);
18
18
  box-sizing: border-box;
19
19
  content: 'visible-on-ancestor-target';
20
20
  font-size: 0.7rem;
21
21
  height: 100%;
22
22
  left: 0;
23
23
  padding: 0.5rem;
24
- position: absolute;;
24
+ position: absolute;
25
25
  text-align: right;
26
26
  top: 0;
27
27
  width: 100%;
@@ -30,8 +30,8 @@
30
30
  text-align: left;
31
31
  }
32
32
  .translucent-container {
33
- position: relative;
34
33
  height: 150px;
34
+ position: relative;
35
35
  }
36
36
  .translucent-container > img {
37
37
  border-radius: 6px;
@@ -43,8 +43,8 @@
43
43
  width: 300px;
44
44
  }
45
45
  .translucent-container > d2l-button-icon {
46
- margin-top: 12px;
47
46
  margin-left: 12px;
47
+ margin-top: 12px;
48
48
  }
49
49
  [dir="rtl"].translucent-container > d2l-button-icon {
50
50
  margin-left: 0;
package/components/button/demo/floating-buttons-in-frame.html CHANGED
@@ -8,26 +8,26 @@
8
8
  import '../../demo/demo-page.js';
9
9
  </script>
10
10
  <style>
11
- #demoContainer{
12
- display:inline-block;
13
- width: 100%;
11
+ #demoContainer {
12
+ display: inline-block;
14
13
  min-height: 200px;
14
+ width: 100%;
15
15
  }
16
16
  #leftFrame {
17
- width: 30%;
17
+ float: left;
18
18
  height: 505px;
19
19
  min-height: 200px;
20
- float:left;
21
- resize: both;
22
20
  overflow: auto;
21
+ resize: both;
22
+ width: 30%;
23
23
  }
24
24
  #rightFrame {
25
- width: 65%;
25
+ float: left;
26
26
  height: 505px;
27
27
  min-height: 200px;
28
- float:left;
29
- resize: both;
30
28
  overflow: auto;
29
+ resize: both;
30
+ width: 65%;
31
31
  }
32
32
  </style>
33
33
  </head>
package/components/button/demo/floating-buttons-in-tabs.html CHANGED
@@ -12,85 +12,84 @@
12
12
  <style>
13
13
  /* ripping these off for now until we can get a local tabs menu to test this on. */
14
14
  .vui-tabmenu {
15
- border-bottom: 1px solid #ddd;
16
- padding-left: 0;
15
+ border-bottom: 1px solid #dddddd;
16
+ list-style: none;
17
17
  margin-bottom: 0;
18
18
  margin-top: 0;
19
- list-style: none;
19
+ padding-left: 0;
20
20
  }
21
- .vui-tabmenu:after,.vui-tabmenu:before {
22
- display: table;
21
+ .vui-tabmenu::after, .vui-tabmenu::before {
23
22
  content: " ";
23
+ display: table;
24
24
  }
25
- .vui-tabmenu:after {
25
+ .vui-tabmenu::after {
26
26
  clear: both;
27
27
  }
28
- .vui-tabmenu>.vui-tabmenu-item {
28
+ .vui-tabmenu > .vui-tabmenu-item {
29
+ display: block;
29
30
  float: left;
30
31
  margin-bottom: -1px;
32
+ overflow: hidden;
31
33
  position: relative;
32
- display: block;
33
34
  text-align: center;
34
- overflow: hidden;
35
35
  }
36
- .vui-tabmenu>.vui-tabmenu-item>a {
37
- margin-right: 2px;
38
- line-height: 1.428571429;
36
+ .vui-tabmenu > .vui-tabmenu-item > a {
39
37
  border: 1px solid transparent;
40
- position: relative;
38
+ color: #a2a2a2;
41
39
  display: block;
40
+ line-height: 1.428571429;
41
+ margin-right: 2px;
42
42
  padding: 10px 15px;
43
- color: #a2a2a2;
43
+ position: relative;
44
44
  }
45
- .vui-tabmenu>.vui-tabmenu-item:last-child>a {
46
- margin-right: 0px;
45
+ .vui-tabmenu > .vui-tabmenu-item:last-child > a {
46
+ margin-right: 0;
47
47
  }
48
- .vui-tabmenu>.vui-tabmenu-item>a:hover {
49
- color: #666;
48
+ .vui-tabmenu > .vui-tabmenu-item > a:hover {
49
+ color: #666666;
50
50
  }
51
- .vui-tabmenu>.vui-tabmenu-item-select>a{
52
- color: #666;
53
- cursor: default;
54
- border: 1px solid #ddd;
51
+ .vui-tabmenu > .vui-tabmenu-item-select > a {
52
+ background-color: #fafafa;
53
+ border: 1px solid #dddddd;
55
54
  border-bottom-color: transparent;
55
+ color: #666666;
56
+ cursor: default;
56
57
  font-weight: bold;
57
- background-color: #fafafa;
58
- /*border-top: 4px solid #00617F;*/
59
58
  }
60
- .vui-tabmenu>.vui-tabmenu-item>a>.vui-tabmenu-item-blue {
61
- display: block;
59
+ .vui-tabmenu > .vui-tabmenu-item > a > .vui-tabmenu-item-blue {
62
60
  background-color: #bababa;
61
+ display: block;
63
62
  height: 16px;
64
- width: 1px;
65
63
  position: absolute;
66
64
  right: -3px;
67
65
  top: 10px;
66
+ width: 1px;
68
67
  }
69
- .vui-tabmenu>.vui-tabmenu-item-select-prev>a>.vui-tabmenu-item-blue,
70
- .vui-tabmenu>.vui-tabmenu-item:last-child>a>.vui-tabmenu-item-blue {
68
+ .vui-tabmenu > .vui-tabmenu-item-select-prev > a > .vui-tabmenu-item-blue,
69
+ .vui-tabmenu > .vui-tabmenu-item:last-child > a > .vui-tabmenu-item-blue {
71
70
  display: none;
72
71
  }
73
- .vui-tabmenu>.vui-tabmenu-item-select:last-child>a>.vui-tabmenu-item-blue,
74
- .vui-tabmenu>.vui-tabmenu-item-select>a>.vui-tabmenu-item-blue {
72
+ .vui-tabmenu > .vui-tabmenu-item-select:last-child > a > .vui-tabmenu-item-blue,
73
+ .vui-tabmenu > .vui-tabmenu-item-select > a > .vui-tabmenu-item-blue {
74
+ background-color: #00617f;
75
+ border: 1px solid #00617f;
75
76
  display: block;
76
77
  height: 2px;
77
- width: 100%;
78
+ left: -1px;
78
79
  position: absolute;
79
80
  top: -1px;
80
- background-color: #00617F;
81
- left: -1px;
82
- border: 1px solid #00617f;
81
+ width: 100%;
83
82
  }
84
- [dir="rtl"] .vui-tabmenu>.vui-tabmenu-item-select:last-child>a>.vui-tabmenu-item-blue,
85
- [dir="rtl"] .vui-tabmenu>.vui-tabmenu-item-select>a>.vui-tabmenu-item-blue {
83
+ [dir="rtl"] .vui-tabmenu > .vui-tabmenu-item-select:last-child > a > .vui-tabmenu-item-blue,
84
+ [dir="rtl"] .vui-tabmenu > .vui-tabmenu-item-select > a > .vui-tabmenu-item-blue {
86
85
  right: -1px;
87
86
  }
88
87
  .d2l-textblock {
89
- word-wrap: break-word;
90
- margin-bottom: 0;
88
+ margin-bottom: 0;
89
+ word-wrap: break-word;
91
90
  }
92
91
  .d2l-hidden {
93
- display: none !important;
92
+ display: none !important;
94
93
  }
95
94
  </style>
96
95
  </head>
@@ -149,7 +148,7 @@
149
148
 
150
149
  <div class="content">
151
150
  <p>I love Tea!</p>
152
- <div style="width: 100px; height: 300px;"></div>
151
+ <div style="height: 300px; width: 100px;"></div>
153
152
  </div>
154
153
  <d2l-floating-buttons id="wc-buttons-tea">
155
154
  <d2l-button primary id="btn-make-more-tea">Brew more Tea!</d2l-button>
package/components/card/demo/card.html CHANGED
@@ -30,12 +30,12 @@
30
30
  text-align: center;
31
31
  }
32
32
  .badge > img {
33
- object-fit: cover;
34
- object-position: center;
35
- height: 70px;
36
33
  background-color: white;
37
- border-radius: 6px;
38
34
  border: 1px solid #494c4e;
35
+ border-radius: 6px;
36
+ height: 70px;
37
+ object-fit: cover;
38
+ object-position: center;
39
39
  }
40
40
  .badge-status {
41
41
  background-color: white;
@@ -61,7 +61,7 @@
61
61
  <template>
62
62
  <div class="subtle-demo">
63
63
 
64
- <d2l-card subtle align-center text="Image Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="width: 245px; height: 280px;">
64
+ <d2l-card subtle align-center text="Image Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 280px; width: 245px;">
65
65
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
66
66
  <div slot="badge" class="badge">
67
67
  <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Stick_Figure.svg/340px-Stick_Figure.svg.png">
@@ -69,7 +69,7 @@
69
69
  <div slot="content">Image Badge</div>
70
70
  </d2l-card>
71
71
 
72
- <d2l-card subtle align-center text="Status Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="width: 245px; height: 280px;">
72
+ <d2l-card subtle align-center text="Status Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 280px; width: 245px;">
73
73
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
74
74
  <div class="badge-status" slot="badge">
75
75
  <d2l-status-indicator text="Success" state="success"></d2l-status-indicator>
@@ -77,7 +77,7 @@
77
77
  <div slot="content">Status Badge</div>
78
78
  </d2l-card>
79
79
 
80
- <d2l-card subtle align-center text="No Link" style="width: 245px; height: 280px;">
80
+ <d2l-card subtle align-center text="No Link" style="height: 280px; width: 245px;">
81
81
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
82
82
  <div slot="content">No Link</div>
83
83
  </d2l-card>
@@ -92,7 +92,7 @@
92
92
  <template>
93
93
  <div class="subtle-demo">
94
94
 
95
- <d2l-card subtle align-center text="Hydrology" href="https://en.wikipedia.org/wiki/Hydrology" style="width: 245px; height: 300px;">
95
+ <d2l-card subtle align-center text="Hydrology" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 300px; width: 245px;">
96
96
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
97
97
  <d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
98
98
  <d2l-dropdown-content>
@@ -119,7 +119,7 @@
119
119
  </div>
120
120
  </d2l-card>
121
121
 
122
- <d2l-card subtle align-center text="Grade 2" href="https://en.wikipedia.org/wiki/Second_grade" style="width: 245px; height: 300px;">
122
+ <d2l-card subtle align-center text="Grade 2" href="https://en.wikipedia.org/wiki/Second_grade" style="height: 300px; width: 245px;">
123
123
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-low-density-max-size.jpg">
124
124
  <d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
125
125
  <d2l-dropdown-content><div>This is where you could put the super cool features for your card!</div><br><div>As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.</div></d2l-dropdown-content>
@@ -139,7 +139,7 @@
139
139
  </div>
140
140
  </d2l-card>
141
141
 
142
- <d2l-card subtle align-center text="Painting" href="https://en.wikipedia.org/wiki/Painting" style="width: 245px; height: 300px;">
142
+ <d2l-card subtle align-center text="Painting" href="https://en.wikipedia.org/wiki/Painting" style="height: 300px; width: 245px;">
143
143
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-low-density-max-size.jpg">
144
144
  <d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
145
145
  <d2l-dropdown-content><div>This is where you could put the super cool features for your card!</div><br><div>As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.</div></d2l-dropdown-content>
@@ -158,7 +158,7 @@
158
158
  <d2l-demo-snippet>
159
159
  <template>
160
160
 
161
- <d2l-card align-center text="Image Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="width: 245px; height: 280px;">
161
+ <d2l-card align-center text="Image Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 280px; width: 245px;">
162
162
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
163
163
  <div slot="badge" class="badge">
164
164
  <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Stick_Figure.svg/340px-Stick_Figure.svg.png">
@@ -166,7 +166,7 @@
166
166
  <div slot="content">Image Badge</div>
167
167
  </d2l-card>
168
168
 
169
- <d2l-card align-center text="Status Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="width: 245px; height: 280px;">
169
+ <d2l-card align-center text="Status Badge" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 280px; width: 245px;">
170
170
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
171
171
  <div class="badge-status" slot="badge">
172
172
  <d2l-status-indicator text="Success" state="success"></d2l-status-indicator>
@@ -174,7 +174,7 @@
174
174
  <div slot="content">Status Badge</div>
175
175
  </d2l-card>
176
176
 
177
- <d2l-card align-center text="No Link" style="width: 245px; height: 280px;">
177
+ <d2l-card align-center text="No Link" style="height: 280px; width: 245px;">
178
178
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
179
179
  <div slot="content">No Link</div>
180
180
  </d2l-card>
@@ -187,7 +187,7 @@
187
187
  <d2l-demo-snippet>
188
188
  <template>
189
189
 
190
- <d2l-card align-center text="Hydrology" href="https://en.wikipedia.org/wiki/Hydrology" style="width: 245px; height: 300px;">
190
+ <d2l-card align-center text="Hydrology" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 300px; width: 245px;">
191
191
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
192
192
  <d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
193
193
  <d2l-dropdown-content>
@@ -214,7 +214,7 @@
214
214
  </div>
215
215
  </d2l-card>
216
216
 
217
- <d2l-card align-center text="Painting" href="https://en.wikipedia.org/wiki/Painting" style="width: 245px; height: 300px;">
217
+ <d2l-card align-center text="Painting" href="https://en.wikipedia.org/wiki/Painting" style="height: 300px; width: 245px;">
218
218
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-low-density-max-size.jpg">
219
219
  <d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
220
220
  <d2l-dropdown-content><div>This is where you could put the super cool features for your card!</div><br><div>As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.</div></d2l-dropdown-content>
@@ -224,7 +224,7 @@
224
224
  <d2l-button slot="footer" style="width: 100%;">Shiny Button</d2l-button>
225
225
  </d2l-card>
226
226
 
227
- <d2l-card align-center text="Grade 2" href="https://en.wikipedia.org/wiki/Second_grade" style="width: 245px; height: 300px;">
227
+ <d2l-card align-center text="Grade 2" href="https://en.wikipedia.org/wiki/Second_grade" style="height: 300px; width: 245px;">
228
228
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-low-density-max-size.jpg">
229
229
  <d2l-dropdown-more slot="actions" translucent visible-on-ancestor text="Open!">
230
230
  <d2l-dropdown-content><div>This is where you could put the super cool features for your card!</div><br><div>As with all dropdowns, you can choose between a generic dropdown container, or a menu specific one.</div></d2l-dropdown-content>
@@ -252,8 +252,8 @@
252
252
  <d2l-demo-snippet>
253
253
  <template>
254
254
 
255
- <d2l-card align-center text="Hydrology" href="https://en.wikipedia.org/wiki/Hydrology" style="width: 245px; height: 300px;">
256
- <d2l-card-loading-shimmer slot="header" loading style="display: block; width: 100%; height: 103.5px;">
255
+ <d2l-card align-center text="Hydrology" href="https://en.wikipedia.org/wiki/Hydrology" style="height: 300px; width: 245px;">
256
+ <d2l-card-loading-shimmer slot="header" loading style="display: block; height: 103.5px; width: 100%;">
257
257
  <img alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
258
258
  </d2l-card-loading-shimmer>
259
259
  <div slot="content"><div>Hydrology</div><d2l-card-content-meta>This is some extra meta data that will fill the content slot of the card.</d2l-card-content-meta></div>
package/components/dialog/README.md CHANGED
@@ -2,10 +2,9 @@
2
2
 
3
3
  Dialogs interrupt the user to complete a set of tasks, confirm an action, or offer important options.
4
4
 
5
- <!-- docs: demo autoSize:false size:large -->
5
+ <!-- docs: demo autoOpen:true autoSize:false size:large -->
6
6
  ```html
7
7
  <script type="module">
8
- import './pages/assets/open-first-item-helper.js';
9
8
  import '@brightspace-ui/core/components/button/button.js';
10
9
  import '@brightspace-ui/core/components/dialog/dialog.js';
11
10
  </script>
package/components/dropdown/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # Dropdowns
2
2
  A Dropdown is a button that opens a floating container to offer menu items or other content.
3
3
 
4
- <!-- docs: demo autoSize:false align:flex-start size:medium -->
4
+ <!-- docs: demo align:flex-start autoSize:false size:medium -->
5
5
  ```html
6
6
  <script type="module">
7
7
  import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
@@ -26,10 +26,9 @@ A Dropdown is a button that opens a floating container to offer menu items or ot
26
26
 
27
27
  `d2l-dropdown` is a generic opener for dropdown content (`d2l-dropdown-content`, `d2l-dropdown-menu` or `d2l-dropdown-tabs`) enabling alternate opener implementation using existing elements/components. Provide and indicate your own opener element with the class attribute value `d2l-dropdown-opener`. Wire-up is automatic.
28
28
 
29
- <!-- docs: demo live name:d2l-dropdown autoSize:false align:flex-start size:medium -->
29
+ <!-- docs: demo live name:d2l-dropdown align:flex-start autoOpen:true autoSize:false size:medium -->
30
30
  ```html
31
31
  <script type="module">
32
- import './pages/assets/open-first-item-helper.js';
33
32
  import '@brightspace-ui/core/components/dropdown/dropdown.js';
34
33
  import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
35
34
  </script>
@@ -72,10 +71,9 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
72
71
  ![screenshot the basic dropdown-button opener](./screenshots/dropdown-button.png)
73
72
  <!-- docs: end hidden content -->
74
73
 
75
- <!-- docs: demo live name:d2l-dropdown-button autoSize:false align:flex-start size:medium -->
74
+ <!-- docs: demo live name:d2l-dropdown-button align:flex-start autoOpen:true autoSize:false size:medium -->
76
75
  ```html
77
76
  <script type="module">
78
- import './pages/assets/open-first-item-helper.js';
79
77
  import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
80
78
  import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
81
79
  </script>
@@ -105,10 +103,9 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
105
103
  ![screenshot the basic dropdown-button-subtle opener](./screenshots/dropdown-button-subtle.png)
106
104
  <!-- docs: end hidden content -->
107
105
 
108
- <!-- docs: demo live name:d2l-dropdown-button-subtle align:flex-start autoSize:false size:medium -->
106
+ <!-- docs: demo live name:d2l-dropdown-button-subtle align:flex-start autoOpen:true autoSize:false size:medium -->
109
107
  ```html
110
108
  <script type="module">
111
- import './pages/assets/open-first-item-helper.js';
112
109
  import '@brightspace-ui/core/components/dropdown/dropdown-button-subtle.js';
113
110
  import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
114
111
  </script>
@@ -146,10 +143,9 @@ To make your `d2l-dropdown-button-subtle` accessible, use the following properti
146
143
  ![screenshot the basic dropdown-context-menu opener](./screenshots/dropdown-context-menu.png)
147
144
  <!-- docs: end hidden content -->
148
145
 
149
- <!-- docs: demo live name:d2l-dropdown-context-menu align:flex-start autoSize:false size:medium -->
146
+ <!-- docs: demo live name:d2l-dropdown-context-menu align:flex-start autoOpen:true autoSize:false size:medium -->
150
147
  ```html
151
148
  <script type="module">
152
- import './pages/assets/open-first-item-helper.js';
153
149
  import '@brightspace-ui/core/components/dropdown/dropdown-context-menu.js';
154
150
  import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
155
151
  </script>
@@ -188,10 +184,9 @@ To make your usage of `d2l-dropdown-context-menu` accessible, use the following
188
184
  ![screenshot the basic dropdown-more opener](./screenshots/dropdown-more.png)
189
185
  <!-- docs: end hidden content -->
190
186
 
191
- <!-- docs: demo live name:d2l-dropdown-more autoSize:false align:flex-start size:medium -->
187
+ <!-- docs: demo live name:d2l-dropdown-more align:flex-start autoOpen:true autoSize:false size:medium -->
192
188
  ```html
193
189
  <script type="module">
194
- import './pages/assets/open-first-item-helper.js';
195
190
  import '@brightspace-ui/core/components/dropdown/dropdown-more.js';
196
191
  import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
197
192
  </script>
@@ -231,10 +226,9 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
231
226
  ![screenshot the dropdown-content with mobile-tray="right"](./screenshots/dropdown-content-mobile-tray.png)
232
227
  <!-- docs: end hidden content -->
233
228
 
234
- <!-- docs: demo live name:d2l-dropdown-content autoSize:false align:flex-start size:medium -->
229
+ <!-- docs: demo live name:d2l-dropdown-content align:flex-start autoSize:false autoOpen:true size:medium -->
235
230
  ```html
236
231
  <script type="module">
237
- import './pages/assets/open-first-item-helper.js';
238
232
  import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
239
233
  import '@brightspace-ui/core/components/dropdown/dropdown-content.js';
240
234
  </script>
@@ -294,10 +288,9 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
294
288
  ![screenshot the basic dropdown-menu](./screenshots/dropdown-menu.png)
295
289
  <!-- docs: end hidden content -->
296
290
 
297
- <!-- docs: demo live name:d2l-dropdown-menu size:medium align:flex-start autoSize:false -->
291
+ <!-- docs: demo live name:d2l-dropdown-menu align:flex-start autoOpen:true autoSize:false size:medium -->
298
292
  ```html
299
293
  <script type="module">
300
- import './pages/assets/open-first-item-helper.js';
301
294
  import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
302
295
  import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
303
296
  import '@brightspace-ui/core/components/menu/menu.js';
@@ -338,10 +331,9 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
338
331
  ![screenshot the basic dropdown-tabs](./screenshots/dropdown-tabs.png)
339
332
  <!-- docs: end hidden content -->
340
333
 
341
- <!-- docs: demo live name:d2l-dropdown-tabs size:large autoSize:false align:flex-start -->
334
+ <!-- docs: demo live name:d2l-dropdown-tabs autoOpen:true autoSize:false align:flex-start size:large -->
342
335
  ```html
343
336
  <script type="module">
344
- import './pages/assets/open-first-item-helper.js';
345
337
  import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
346
338
  import '@brightspace-ui/core/components/dropdown/dropdown-tabs.js';
347
339
  import '@brightspace-ui/core/components/menu/menu.js';
package/components/dropdown/demo/dropdown-context-menu.html CHANGED
@@ -16,12 +16,12 @@
16
16
  position: relative;
17
17
  }
18
18
  .ancestor-container::before {
19
- background-color: rgba(0,0,0,0.03);
19
+ background-color: rgba(0, 0, 0, 0.03);
20
20
  box-sizing: border-box;
21
21
  content: 'visible-on-ancestor-target';
22
22
  font-size: 0.7rem;
23
23
  height: 100%;
24
- left:0;
24
+ left: 0;
25
25
  padding: 0.5rem;
26
26
  position: absolute;
27
27
  text-align: right;
@@ -29,20 +29,20 @@
29
29
  width: 100%;
30
30
  }
31
31
  .translucent-container {
32
- position: relative;
33
32
  height: 150px;
33
+ position: relative;
34
34
  }
35
35
  .translucent-container > img {
36
36
  border-radius: 6px;
37
37
  height: 100%;
38
- position: absolute;
39
38
  max-width: 400px;
39
+ position: absolute;
40
40
  width: 100%;
41
41
  }
42
42
  .translucent-container > d2l-dropdown-context-menu {
43
- padding-right: 0;
44
- margin-top: 12px;
45
43
  margin-left: 12px;
44
+ margin-top: 12px;
45
+ padding-right: 0;
46
46
  }
47
47
  </style>
48
48
  </head>
@@ -126,4 +126,4 @@
126
126
 
127
127
  </body>
128
128
 
129
- </html>
129
+ </html>
package/components/dropdown/demo/dropdown-menu.html CHANGED
@@ -103,7 +103,7 @@
103
103
  <d2l-dropdown>
104
104
  <button class="d2l-dropdown-opener">Open it!</button>
105
105
  <d2l-dropdown-menu id="dropdown" no-padding-footer>
106
- <div slot="header" style="font-weight: bold; width: 100%; text-align: center;">Physics Topics</div>
106
+ <div slot="header" style="font-weight: bold; text-align: center; width: 100%;">Physics Topics</div>
107
107
  <d2l-menu label="Physics Topics">
108
108
  <d2l-menu-item text="Introduction"></d2l-menu-item>
109
109
  <d2l-menu-item text="Matter"></d2l-menu-item>
@@ -122,7 +122,7 @@
122
122
  <d2l-menu-item text="Gravity"></d2l-menu-item>
123
123
  <d2l-menu-item text="Magnetism"></d2l-menu-item>
124
124
  </d2l-menu>
125
- <div slot="footer" style="font-size: 0.75rem; width: 100%; text-align: center;">And <a href="#">More</a>!</div>
125
+ <div slot="footer" style="font-size: 0.75rem; text-align: center; width: 100%;">And <a href="#">More</a>!</div>
126
126
  </d2l-dropdown-menu>
127
127
  </d2l-dropdown>
128
128
  </template>
@@ -134,7 +134,7 @@
134
134
  <d2l-dropdown>
135
135
  <button class="d2l-dropdown-opener">Open it!</button>
136
136
  <d2l-dropdown-menu id="dropdown" no-padding-footer mobile-tray="right" max-height="300">
137
- <div slot="header" style="font-weight: bold; width: 100%; text-align: center;">Physics Topics</div>
137
+ <div slot="header" style="font-weight: bold; text-align: center; width: 100%;">Physics Topics</div>
138
138
  <d2l-menu label="Physics Topics">
139
139
  <d2l-menu-item text="Introduction"></d2l-menu-item>
140
140
  <d2l-menu-item text="Matter"></d2l-menu-item>
@@ -153,7 +153,7 @@
153
153
  <d2l-menu-item text="Gravity"></d2l-menu-item>
154
154
  <d2l-menu-item text="Magnetism"></d2l-menu-item>
155
155
  </d2l-menu>
156
- <div slot="footer" style="font-size: 0.75rem; width: 100%; text-align: center;">And <a href="#">More</a>!</div>
156
+ <div slot="footer" style="font-size: 0.75rem; text-align: center; width: 100%;">And <a href="#">More</a>!</div>
157
157
  </d2l-dropdown-menu>
158
158
  </d2l-dropdown>
159
159
  </template>
@@ -165,7 +165,7 @@
165
165
  <d2l-dropdown>
166
166
  <button class="d2l-dropdown-opener">Open it!</button>
167
167
  <d2l-dropdown-menu id="dropdown" no-padding-footer>
168
- <div slot="header" style="font-weight: bold; width: 100%; text-align: center;">Study Guide</div>
168
+ <div slot="header" style="font-weight: bold; text-align: center; width: 100%;">Study Guide</div>
169
169
  <d2l-menu label="Study Guide">
170
170
  <d2l-menu-item-radio text="Introduction" value=0></d2l-menu-item-radio>
171
171
  <d2l-menu-item-radio text="Chapter 1" value=1></d2l-menu-item-radio>
@@ -190,7 +190,7 @@
190
190
  <d2l-dropdown>
191
191
  <button class="d2l-dropdown-opener">Open it!</button>
192
192
  <d2l-dropdown-menu no-padding-footer>
193
- <div slot="header" style="font-weight: bold; width: 100%; text-align: center;">Helpful Links</div>
193
+ <div slot="header" style="font-weight: bold; text-align: center; width: 100%;">Helpful Links</div>
194
194
  <d2l-menu label="Helpful Links">
195
195
  <d2l-menu-item-link text="menu.js (View)" href="../../menu/menu.js"></d2l-menu-item-link>
196
196
  <d2l-menu-item-link text="menu.js (Download)" href="../../menu/menu.js" target="_blank" download></d2l-menu-item-link>
package/components/dropdown/demo/dropdown-more.html CHANGED
@@ -33,22 +33,22 @@
33
33
  }
34
34
 
35
35
  .translucent-container {
36
- position: relative;
37
36
  height: 150px;
37
+ position: relative;
38
38
  }
39
39
 
40
40
  .translucent-container > img {
41
41
  border-radius: 6px;
42
42
  height: 100%;
43
- position: absolute;
44
43
  max-width: 400px;
44
+ position: absolute;
45
45
  width: 100%;
46
46
  }
47
47
 
48
48
  .translucent-container > d2l-dropdown-more {
49
- padding-right: 0;
50
- margin-top: 12px;
51
49
  margin-left: 12px;
50
+ margin-top: 12px;
51
+ padding-right: 0;
52
52
  }
53
53
  </style>
54
54
  </head>
package/components/dropdown/dropdown-content-mixin.js CHANGED
@@ -472,7 +472,6 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
472
472
  || isComposedAncestor(this.__getOpener(), activeElement)) {
473
473
  return;
474
474
  }
475
-
476
475
  this.close();
477
476
  }, 0);
478
477
  }
@@ -1023,7 +1022,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
1023
1022
  }
1024
1023
  }
1025
1024
  /** Dispatched when user focus enters the dropdown content (trap-focus option only) */
1026
- this.dispatchEvent(new CustomEvent('d2l-dropdown-focus-enter'));
1025
+ this.dispatchEvent(new CustomEvent('d2l-dropdown-focus-enter', { detail:{ applyFocus: this.__applyFocus } }));
1027
1026
  }
1028
1027
 
1029
1028
  async _handleMobileResize() {
package/components/dropdown/dropdown-opener-mixin.js CHANGED
@@ -260,7 +260,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
260
260
  } else {
261
261
  this._isOpenedViaClick = true;
262
262
  this._isHovering = false;
263
- this.openDropdown(true);
263
+ this.openDropdown(false);
264
264
  }
265
265
  } else this.toggleOpen(false);
266
266
  }
package/components/filter/README.md CHANGED
@@ -7,10 +7,9 @@ Filter with multiple dimensions:
7
7
  ![Filter with multiple dimensions](./screenshots/filter-multi-dim.png?raw=true)
8
8
  <!-- docs: end hidden content -->
9
9
 
10
- <!-- docs: demo align:start autoSize:false size:large -->
10
+ <!-- docs: demo align:start autoOpen:true autoSize:false size:large -->
11
11
  ```html
12
12
  <script type="module">
13
- import './pages/assets/open-first-item-helper.js';
14
13
  import '@brightspace-ui/core/components/filter/filter.js';
15
14
  import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
16
15
  import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
@@ -39,10 +38,9 @@ Filter with multiple dimensions:
39
38
 
40
39
  The `d2l-filter` component allows a user to filter on one or more dimensions of data from a single dropdown.
41
40
 
42
- <!-- docs: demo live name:d2l-filter autoSize:false align:start size:large -->
41
+ <!-- docs: demo live name:d2l-filter align:start autoOpen:true autoSize:false size:large -->
43
42
  ```html
44
43
  <script type="module">
45
- import './pages/assets/open-first-item-helper.js';
46
44
  import '@brightspace-ui/core/components/filter/filter.js';
47
45
  import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
48
46
  import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
@@ -78,7 +76,7 @@ Filter with a single dimension:
78
76
  ![Filters with single dimension](./screenshots/filter.png?raw=true)
79
77
  <!-- docs: end hidden content -->
80
78
 
81
- <!-- docs: demo code autoSize:false align:start size:large -->
79
+ <!-- docs: demo code align:start autoSize:false size:large -->
82
80
  ```html
83
81
  <script type="module">
84
82
  import '@brightspace-ui/core/components/filter/filter.js';
@@ -160,10 +158,9 @@ Set dimension on mobile:
160
158
  ![Set dimension on mobile](./screenshots/filter-mobile.png?raw=true)
161
159
  <!-- docs: end hidden content -->
162
160
 
163
- <!-- docs: demo live name:d2l-filter-dimension-set align:start autoSize:false size:large -->
161
+ <!-- docs: demo live name:d2l-filter-dimension-set align:start autoOpen:true autoSize:false size:large -->
164
162
  ```html
165
163
  <script type="module">
166
- import './pages/assets/open-first-item-helper.js';
167
164
  import '@brightspace-ui/core/components/filter/filter.js';
168
165
  import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
169
166
  import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
package/components/focus-trap/demo/focus-trap.html CHANGED
@@ -15,8 +15,8 @@
15
15
  border: 2px dashed var(--d2l-color-celestine);
16
16
  border-radius: 6px;
17
17
  display: block;
18
- padding: 0.6rem;
19
18
  margin: 0.6rem 0;
19
+ padding: 0.6rem;
20
20
  }
21
21
  d2l-link {
22
22
  display: block;
package/components/inputs/demo/input-checkbox.html CHANGED
@@ -24,7 +24,7 @@
24
24
  <h2>Checkbox with multi-line label</h2>
25
25
  <d2l-demo-snippet>
26
26
  <template>
27
- <d2l-input-checkbox style="width:200px;">
27
+ <d2l-input-checkbox style="width: 200px;">
28
28
  Label for checkbox that wraps nicely onto
29
29
  multiple lines and stays aligned
30
30
  </d2l-input-checkbox>
@@ -49,7 +49,7 @@
49
49
  <d2l-demo-snippet>
50
50
  <template>
51
51
  <d2l-input-checkbox>Label for checkbox</d2l-input-checkbox>
52
- <d2l-input-checkbox-spacer style="color:#999999;">
52
+ <d2l-input-checkbox-spacer style="color: #999999;">
53
53
  Additional content can go here and will<br>
54
54
  also line up nicely with the checkbox.
55
55
  </d2l-input-checkbox-spacer>
package/components/inputs/demo/input-radio.html CHANGED
@@ -30,7 +30,7 @@
30
30
  <d2l-demo-snippet>
31
31
  <template>
32
32
  <d2l-test-input-radio-label></d2l-test-input-radio-label>
33
- <d2l-input-radio-spacer style="color:#999999;">
33
+ <d2l-input-radio-spacer style="color: #999999;">
34
34
  Additional content can go here and will<br>
35
35
  also line up nicely with the radios.
36
36
  </d2l-input-radio-spacer>
package/components/inputs/docs/input-date-time.md CHANGED
@@ -45,10 +45,9 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
45
45
  ![example screenshot of date input](../screenshots/date.gif?raw=true)
46
46
  <!-- docs: end hidden content -->
47
47
 
48
- <!-- docs: demo live name:d2l-input-date align:flex-start autoSize:false size:xlarge -->
48
+ <!-- docs: demo live name:d2l-input-date align:flex-start autoOpen:true autoSize:false size:xlarge -->
49
49
  ```html
50
50
  <script type="module">
51
- import './pages/assets/open-first-item-helper.js';
52
51
  import '@brightspace-ui/core/components/inputs/input-date.js';
53
52
  </script>
54
53
  <d2l-input-date label="Birthdate">
@@ -96,10 +95,9 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
96
95
  ![example screenshot of date range input](../screenshots/date-range.gif?raw=true)
97
96
  <!-- docs: end hidden content -->
98
97
 
99
- <!-- docs: demo live name:d2l-input-date-range align:flex-start autoSize:false size:xlarge -->
98
+ <!-- docs: demo live name:d2l-input-date-range align:flex-start autoOpen:true autoSize:false size:xlarge -->
100
99
  ```html
101
100
  <script type="module">
102
- import './pages/assets/open-first-item-helper.js';
103
101
  import '@brightspace-ui/core/components/inputs/input-date-range.js';
104
102
  </script>
105
103
  <d2l-input-date-range label="Availability Range">
@@ -153,10 +151,9 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
153
151
  ![example screenshot of time input](../screenshots/time.gif?raw=true)
154
152
  <!-- docs: end hidden content -->
155
153
 
156
- <!-- docs: demo live name:d2l-input-time align:flex-start autoSize:false size:large -->
154
+ <!-- docs: demo live name:d2l-input-time align:flex-start autoOpen:true autoSize:false size:large -->
157
155
  ```html
158
156
  <script type="module">
159
- import './pages/assets/open-first-item-helper.js';
160
157
  import '@brightspace-ui/core/components/inputs/input-time.js';
161
158
  </script>
162
159
  <d2l-input-time label="Time">
@@ -194,7 +191,7 @@ To make your usage of `d2l-input-time` accessible, use the following properties
194
191
  | `label-hidden` | Use if label should be visually hidden but available for screen reader users |
195
192
  | `labelled-by` | String | Use when another visible element should act as the label |
196
193
 
197
- ### Time Range Input [d2l-input-time-range]
194
+ ## Time Range Input [d2l-input-time-range]
198
195
 
199
196
  Use the `<d2l-input-time-range>` component when users need to enter two times in a range, and the date is already known. The component consists of two input-time components - one for the start of a range and one for the end of a range. Values specified for these components (through the `start-value` and/or `end-value` attributes) are displayed if specified, and selected values are reflected.
200
197
 
@@ -204,10 +201,9 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
204
201
  ![example screenshot of time range input](../screenshots/time-range.gif?raw=true)
205
202
  <!-- docs: end hidden content -->
206
203
 
207
- <!-- docs: demo live name:d2l-input-time-range align:flex-start autoSize:false size:large -->
204
+ <!-- docs: demo live name:d2l-input-time-range align:flex-start autoOpen:true autoSize:false size:large -->
208
205
  ```html
209
206
  <script type="module">
210
- import './pages/assets/open-first-item-helper.js';
211
207
  import '@brightspace-ui/core/components/inputs/input-time-range.js';
212
208
  </script>
213
209
  <d2l-input-time-range label="Availability Range">
@@ -257,10 +253,9 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
257
253
  ![example screenshot of date input](../screenshots/date-time.gif?raw=true)
258
254
  <!-- docs: end hidden content -->
259
255
 
260
- <!-- docs: demo live name:d2l-input-date-time align:flex-start autoSize:false size:xlarge -->
256
+ <!-- docs: demo live name:d2l-input-date-time align:flex-start autoOpen:true autoSize:false size:xlarge -->
261
257
  ```html
262
258
  <script type="module">
263
- import './pages/assets/open-first-item-helper.js';
264
259
  import '@brightspace-ui/core/components/inputs/input-date-time.js';
265
260
  </script>
266
261
  <d2l-input-date-time label="Due Date">
@@ -309,10 +304,9 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
309
304
  ![example screenshot of date-time range input](../screenshots/date-time-range.gif?raw=true)
310
305
  <!-- docs: end hidden content -->
311
306
 
312
- <!-- docs: demo live name:d2l-input-date-time-range align:flex-start autoSize:false size:xlarge -->
307
+ <!-- docs: demo live name:d2l-input-date-time-range align:flex-start autoOpen:true autoSize:false size:xlarge -->
313
308
  ```html
314
309
  <script type="module">
315
- import './pages/assets/open-first-item-helper.js';
316
310
  import '@brightspace-ui/core/components/inputs/input-date-time-range.js';
317
311
  </script>
318
312
  <d2l-input-date-time-range label="Availability Range">
package/components/inputs/input-date-time.js CHANGED
@@ -309,7 +309,7 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
309
309
  } else {
310
310
  const inputTime = this.shadowRoot.querySelector('d2l-input-time');
311
311
  let time;
312
- if (e.detail?.setToNow) time = _getFormattedDefaultTime('now');
312
+ if (e.detail && e.detail.setToNow) time = _getFormattedDefaultTime('now');
313
313
  else time = inputTime ? inputTime.value : _getFormattedDefaultTime(this.timeDefaultValue);
314
314
  this.value = this.localized ? _formatLocalDateTimeInISO(newDate, time) : getUTCDateTimeFromLocalDateTime(newDate, time);
315
315
  }
package/components/list/demo/list-item-layouts.html CHANGED
@@ -14,8 +14,8 @@
14
14
  </script>
15
15
  <style>
16
16
  img {
17
- object-fit: cover;
18
17
  height: 500px;
18
+ object-fit: cover;
19
19
  }
20
20
  d2l-list-item[slim] div {
21
21
  overflow: hidden;
package/components/list/demo/list.html CHANGED
@@ -21,8 +21,8 @@
21
21
  </script>
22
22
  <style>
23
23
  img {
24
- object-fit: cover;
25
24
  height: 500px;
25
+ object-fit: cover;
26
26
  }
27
27
  </style>
28
28
  </head>
package/components/menu/demo/checkbox-menu.html CHANGED
@@ -17,7 +17,7 @@
17
17
  <h2>Checkbox Menu</h2>
18
18
  <d2l-demo-snippet>
19
19
  <template>
20
- <d2l-menu label="Checkbox Menu" style="max-width:400px;">
20
+ <d2l-menu label="Checkbox Menu" style="max-width: 400px;">
21
21
  <d2l-menu-item-checkbox text="Checkbox 1 with a very long title that will be cut off" value="1"></d2l-menu-item-checkbox>
22
22
  <d2l-menu-item-checkbox text="Checkbox 2" value="2"></d2l-menu-item-checkbox>
23
23
  <d2l-menu-item-checkbox text="Checkbox 3" value="3"></d2l-menu-item-checkbox>
@@ -34,7 +34,7 @@
34
34
  <h2>Supporting Slot</h2>
35
35
  <d2l-demo-snippet>
36
36
  <template>
37
- <d2l-menu label="Checkbox Menu" style="max-width:400px;">
37
+ <d2l-menu label="Checkbox Menu" style="max-width: 400px;">
38
38
  <d2l-menu-item-checkbox text="Checkbox 1" value="1">
39
39
  <div slot="supporting">1 point</div>
40
40
  </d2l-menu-item-checkbox>
package/components/menu/demo/menu.html CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  <d2l-demo-snippet>
24
24
  <template>
25
- <d2l-menu label="Astronomy" style="max-width:400px;">
25
+ <d2l-menu label="Astronomy" style="max-width: 400px;">
26
26
  <d2l-menu-item text="Introduction"></d2l-menu-item>
27
27
  <d2l-menu-item-separator></d2l-menu-item-separator>
28
28
  <d2l-menu-item text="Searching the Heavens"></d2l-menu-item>
@@ -37,7 +37,7 @@
37
37
  <h2>Custom View</h2>
38
38
  <d2l-demo-snippet>
39
39
  <template>
40
- <d2l-menu label="Astronomy" style="max-width:400px;">
40
+ <d2l-menu label="Astronomy" style="max-width: 400px;">
41
41
  <d2l-menu-item text="Introduction"></d2l-menu-item>
42
42
  <d2l-menu-item text="Searching the Heavens">
43
43
  <d2l-custom-view>Searching the Heavens</d2l-custom-view>
@@ -54,7 +54,7 @@
54
54
 
55
55
  <d2l-demo-snippet>
56
56
  <template>
57
- <d2l-menu label="Astronomy" style="max-width:400px;">
57
+ <d2l-menu label="Astronomy" style="max-width: 400px;">
58
58
  <d2l-menu-item text="Introduction"></d2l-menu-item>
59
59
  <d2l-menu-item-separator></d2l-menu-item-separator>
60
60
  <d2l-menu-item text="Searching the Heavens"></d2l-menu-item>
@@ -128,7 +128,7 @@
128
128
 
129
129
  <d2l-demo-snippet>
130
130
  <template>
131
- <d2l-menu label="The Solar System" style="max-width:400px;">
131
+ <d2l-menu label="The Solar System" style="max-width: 400px;">
132
132
  <d2l-menu-item text="Mercury">
133
133
  <span slot="supporting">0.39 AU</span>
134
134
  </d2l-menu-item>
package/components/menu/demo/radio-menu.html CHANGED
@@ -17,7 +17,7 @@
17
17
  <h2>Radio Menu</h2>
18
18
  <d2l-demo-snippet>
19
19
  <template>
20
- <d2l-menu id="menu" label="Radio Menu" style="max-width:400px;">
20
+ <d2l-menu id="menu" label="Radio Menu" style="max-width: 400px;">
21
21
  <d2l-menu-item-radio text="Radio Option 1 with a very long title that will be cut off" value="1"></d2l-menu-item-radio>
22
22
  <d2l-menu-item-radio text="Radio Option 2" value="2"></d2l-menu-item-radio>
23
23
  <d2l-menu-item-radio text="Radio Option 3" value="3"></d2l-menu-item-radio>
@@ -34,7 +34,7 @@
34
34
  <h2>Supporting Slot</h2>
35
35
  <d2l-demo-snippet>
36
36
  <template>
37
- <d2l-menu id="menu" label="Radio Menu" style="max-width:400px;">
37
+ <d2l-menu id="menu" label="Radio Menu" style="max-width: 400px;">
38
38
  <d2l-menu-item-radio text="Radio Option 1" value="1">
39
39
  <div slot="supporting">1 point</div>
40
40
  </d2l-menu-item-radio>
package/components/meter/demo/meter.html CHANGED
@@ -19,11 +19,11 @@
19
19
 
20
20
  <d2l-demo-snippet>
21
21
  <template>
22
- <d2l-meter-linear value="2" max="15" style="width: 250px" text="Activities" text-inline></d2l-meter-linear>
23
- <d2l-meter-linear value="3" max="6" style="width: 200px" text="Visited: {x/y}" percent></d2l-meter-linear>
22
+ <d2l-meter-linear value="2" max="15" style="width: 250px;" text="Activities" text-inline></d2l-meter-linear>
23
+ <d2l-meter-linear value="3" max="6" style="width: 200px;" text="Visited: {x/y}" percent></d2l-meter-linear>
24
24
  <div style="background-color: darkblue;">
25
- <d2l-meter-linear value="2" max="15" style="width: 250px" text="Activities" text-inline foreground-light></d2l-meter-linear>
26
- <d2l-meter-linear value="3" max="6" style="width: 200px" text="Visited: {x/y}" percent foreground-light></d2l-meter-linear>
25
+ <d2l-meter-linear value="2" max="15" style="width: 250px;" text="Activities" text-inline foreground-light></d2l-meter-linear>
26
+ <d2l-meter-linear value="3" max="6" style="width: 200px;" text="Visited: {x/y}" percent foreground-light></d2l-meter-linear>
27
27
  </div>
28
28
  </template>
29
29
  </d2l-demo-snippet>
@@ -35,13 +35,13 @@
35
35
  <d2l-meter-radial value="5" max="13"></d2l-meter-radial>
36
36
  <d2l-meter-radial value="10" max="10"></d2l-meter-radial>
37
37
  <d2l-meter-radial value="0" max="10"></d2l-meter-radial>
38
- <d2l-meter-radial value="19" max="26" style="width:25%"></d2l-meter-radial>
38
+ <d2l-meter-radial value="19" max="26" style="width: 25%;"></d2l-meter-radial>
39
39
  <d2l-meter-radial value="5" max="10" text="Completed"></d2l-meter-radial>
40
40
  <div style="background-color: darkgreen;">
41
41
  <d2l-meter-radial value="5" max="13" foreground-light></d2l-meter-radial>
42
42
  <d2l-meter-radial value="10" max="10" foreground-light></d2l-meter-radial>
43
43
  <d2l-meter-radial value="0" max="10" foreground-light></d2l-meter-radial>
44
- <d2l-meter-radial value="19" max="26" style="width:25%" foreground-light></d2l-meter-radial>
44
+ <d2l-meter-radial value="19" max="26" style="width: 25%;" foreground-light></d2l-meter-radial>
45
45
  <d2l-meter-radial value="5" max="10" text="Completed" foreground-light></d2l-meter-radial>
46
46
  </div>
47
47
  </template>
@@ -54,12 +54,12 @@
54
54
  <d2l-meter-circle value="1" max="13"></d2l-meter-circle>
55
55
  <d2l-meter-circle value="10" max="10"></d2l-meter-circle>
56
56
  <d2l-meter-circle value="0" max="10"></d2l-meter-circle>
57
- <d2l-meter-circle value="19" max="26" style="width:25%"></d2l-meter-circle>
57
+ <d2l-meter-circle value="19" max="26" style="width: 25%;"></d2l-meter-circle>
58
58
  <div style="background-color: darkred;">
59
59
  <d2l-meter-circle value="1" max="13" foreground-light></d2l-meter-circle>
60
60
  <d2l-meter-circle value="10" max="10" foreground-light></d2l-meter-circle>
61
61
  <d2l-meter-circle value="0" max="10" foreground-light></d2l-meter-circle>
62
- <d2l-meter-circle value="19" max="26" style="width:25%" foreground-light></d2l-meter-circle>
62
+ <d2l-meter-circle value="19" max="26" style="width: 25%;" foreground-light></d2l-meter-circle>
63
63
  </div>
64
64
  </template>
65
65
  </d2l-demo-snippet>
package/components/selection/demo/selection.html CHANGED
@@ -99,7 +99,7 @@
99
99
  Pick Your Toppings
100
100
  <div class="d2l-selection-header">
101
101
  <d2l-selection-select-all selection-for="collection-1"></d2l-selection-select-all>
102
- <d2l-selection-action selection-for="collection-1" text="Add Note" icon="tier1:add-message" style="padding: 0 0.5rem; flex: 1;"></d2l-selection-action>
102
+ <d2l-selection-action selection-for="collection-1" text="Add Note" icon="tier1:add-message" style="flex: 1; padding: 0 0.5rem;"></d2l-selection-action>
103
103
  <d2l-selection-summary selection-for="collection-1"></d2l-selection-summary>
104
104
  </div>
105
105
  <d2l-demo-selection id="collection-1">
package/components/status-indicator/demo/status-indicator.html CHANGED
@@ -40,14 +40,14 @@
40
40
  <d2l-status-indicator state="success" text="complete"></d2l-status-indicator>
41
41
  </template>
42
42
  </d2l-demo-snippet>
43
-
43
+
44
44
  <h2>Alert</h2>
45
45
  <d2l-demo-snippet>
46
46
  <template>
47
47
  <d2l-status-indicator state="alert" text="overdue"></d2l-status-indicator>
48
48
  </template>
49
49
  </d2l-demo-snippet>
50
-
50
+
51
51
  <h2>None</h2>
52
52
  <d2l-demo-snippet>
53
53
  <template>
@@ -87,7 +87,7 @@
87
87
  <d2l-demo-snippet>
88
88
  <template>
89
89
  <d2l-status-indicator state="alert" text="overdue"></d2l-status-indicator>
90
- <span class="align-item" style="margin-left:10px;">Grade 6 Science</span>
90
+ <span class="align-item" style="margin-left: 10px;">Grade 6 Science</span>
91
91
  <span class="align-item bullet">Assignment</span>
92
92
  </template>
93
93
  </d2l-demo-snippet>
@@ -96,4 +96,4 @@
96
96
 
97
97
  </body>
98
98
 
99
- </html>
99
+ </html>
package/components/table/demo/table.html CHANGED
@@ -41,7 +41,7 @@
41
41
  </template>
42
42
  </d2l-demo-snippet>
43
43
 
44
- <div style="margin-bottom:1000px"></div>
44
+ <div style="margin-bottom: 1000px;"></div>
45
45
  </d2l-demo-page>
46
46
  </body>
47
47
  </html>
package/components/tooltip/demo/tooltip.html CHANGED
@@ -14,14 +14,14 @@
14
14
  </script>
15
15
  <style>
16
16
  .boundary {
17
- position: relative;
18
17
  background-color: var(--d2l-color-citrine);
19
18
  box-sizing: border-box;
20
19
  display: inline-block;
20
+ height: 175px;
21
21
  padding-left: 150px;
22
22
  padding-top: 60px;
23
+ position: relative;
23
24
  width: 350px;
24
- height: 175px;
25
25
  }
26
26
 
27
27
  .bounded {
package/helpers/demo/gestures.html CHANGED
@@ -10,8 +10,8 @@
10
10
  <style>
11
11
  #container {
12
12
  height: 300px;
13
- padding-top: 100px;
14
13
  padding: 100px 1rem 1rem 1rem;
14
+ padding-top: 100px;
15
15
  text-align: center;
16
16
  }
17
17
  #container > :first-child {
package/mixins/async-container/demo/async-container.html CHANGED
@@ -14,8 +14,8 @@
14
14
  <style>
15
15
  #asyncNoContainer div,
16
16
  #asyncContainer div {
17
- margin-top: 0.6rem;
18
17
  margin-bottom: 0.6rem;
18
+ margin-top: 0.6rem;
19
19
  }
20
20
  d2l-async-demo-container {
21
21
  display: block;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "1.207.0",
3
+ "version": "1.207.4",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "repository": "https://github.com/BrightspaceUI/core.git",
6
6
  "publishConfig": {
@@ -14,7 +14,7 @@
14
14
  "lint": "npm run lint:eslint && npm run lint:style && npm run lint:lit",
15
15
  "lint:eslint": "eslint . --ext .js,.html",
16
16
  "lint:lit": "lit-analyzer \"{components,directives,helpers,mixins,templates,test,tools}/**/*.js\" --strict",
17
- "lint:style": "stylelint \"**/*.js\"",
17
+ "lint:style": "stylelint \"**/*.{js,html}\"",
18
18
  "start": "web-dev-server --node-resolve --watch --open",
19
19
  "test": "npm run lint && npm run test:headless && npm run test:axe",
20
20
  "test:axe": "web-test-runner --group aXe",
@@ -42,7 +42,7 @@
42
42
  "license": "Apache-2.0",
43
43
  "devDependencies": {
44
44
  "@babel/eslint-parser": "^7",
45
- "@brightspace-ui/stylelint-config": "^0.2",
45
+ "@brightspace-ui/stylelint-config": "^0.3",
46
46
  "@open-wc/testing": "^2",
47
47
  "@web/dev-server": "^0.1",
48
48
  "@web/test-runner": "^0.13",
@@ -58,7 +58,7 @@
58
58
  "lit-analyzer": "^1",
59
59
  "node-sass": "^6",
60
60
  "sinon": "^12",
61
- "stylelint": "^13"
61
+ "stylelint": "^14"
62
62
  },
63
63
  "dependencies": {
64
64
  "@brightspace-ui/intl": "^3",