@brightspace-ui/core 1.206.1 → 1.207.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) 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/dropdown/demo/dropdown-context-menu.html +7 -7
  9. package/components/dropdown/demo/dropdown-menu.html +6 -6
  10. package/components/dropdown/demo/dropdown-more.html +4 -4
  11. package/components/dropdown/dropdown-content-mixin.js +1 -2
  12. package/components/dropdown/dropdown-opener-mixin.js +1 -1
  13. package/components/focus-trap/demo/focus-trap.html +1 -1
  14. package/components/inputs/demo/input-checkbox.html +2 -2
  15. package/components/inputs/demo/input-radio.html +1 -1
  16. package/components/inputs/input-date-time.js +4 -1
  17. package/components/inputs/input-date.js +27 -9
  18. package/components/inputs/input-time.js +5 -0
  19. package/components/list/demo/list-item-layouts.html +1 -1
  20. package/components/list/demo/list.html +1 -1
  21. package/components/menu/demo/checkbox-menu.html +2 -2
  22. package/components/menu/demo/menu.html +4 -4
  23. package/components/menu/demo/radio-menu.html +2 -2
  24. package/components/meter/demo/meter.html +8 -8
  25. package/components/selection/demo/selection.html +1 -1
  26. package/components/status-indicator/demo/status-indicator.html +4 -4
  27. package/components/table/demo/table.html +1 -1
  28. package/components/tooltip/demo/tooltip.html +2 -2
  29. package/helpers/demo/gestures.html +1 -1
  30. package/lang/ar.js +2 -1
  31. package/lang/cy.js +2 -1
  32. package/lang/da.js +2 -1
  33. package/lang/de.js +2 -1
  34. package/lang/en.js +2 -1
  35. package/lang/es-es.js +2 -1
  36. package/lang/es.js +2 -1
  37. package/lang/fr-fr.js +2 -1
  38. package/lang/fr.js +2 -1
  39. package/lang/ja.js +2 -1
  40. package/lang/ko.js +2 -1
  41. package/lang/nl.js +2 -1
  42. package/lang/pt.js +2 -1
  43. package/lang/sv.js +2 -1
  44. package/lang/tr.js +2 -1
  45. package/lang/zh-tw.js +2 -1
  46. package/lang/zh.js +2 -1
  47. package/mixins/async-container/demo/async-container.html +1 -1
  48. 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/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/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/input-date-time.js CHANGED
@@ -245,6 +245,7 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
245
245
  <d2l-input-date
246
246
  ?novalidate="${this.noValidate}"
247
247
  novalidateminmax
248
+ has-now
248
249
  @change="${this._handleDateChange}"
249
250
  @d2l-input-date-dropdown-toggle="${this._handleDropdownToggle}"
250
251
  ?disabled="${this.disabled}"
@@ -307,7 +308,9 @@ class InputDateTime extends LabelledMixin(SkeletonMixin(FormElementMixin(Localiz
307
308
  this.value = '';
308
309
  } else {
309
310
  const inputTime = this.shadowRoot.querySelector('d2l-input-time');
310
- const time = inputTime ? inputTime.value : _getFormattedDefaultTime(this.timeDefaultValue);
311
+ let time;
312
+ if (e.detail && e.detail.setToNow) time = _getFormattedDefaultTime('now');
313
+ else time = inputTime ? inputTime.value : _getFormattedDefaultTime(this.timeDefaultValue);
311
314
  this.value = this.localized ? _formatLocalDateTimeInISO(newDate, time) : getUTCDateTimeFromLocalDateTime(newDate, time);
312
315
  }
313
316
  this._dispatchChangeEvent();
package/components/inputs/input-date.js CHANGED
@@ -41,6 +41,11 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
41
41
  * @type {string}
42
42
  */
43
43
  emptyText: { type: String, attribute: 'empty-text' },
44
+ /**
45
+ * @ignore
46
+ * Optionally add a 'Now' button to be used in date-time pickers only.
47
+ */
48
+ hasNow: { attribute: 'has-now', type: Boolean },
44
49
  /**
45
50
  * Hides the label visually (moves it to the input's "aria-label" attribute)
46
51
  * @type {boolean}
@@ -125,7 +130,7 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
125
130
  .d2l-calendar-slot-buttons {
126
131
  border-top: 1px solid var(--d2l-color-gypsum);
127
132
  display: flex;
128
- justify-content: flex-end;
133
+ justify-content: center;
129
134
  margin-top: 0.3rem;
130
135
  padding-top: 0.3rem;
131
136
  }
@@ -137,6 +142,8 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
137
142
 
138
143
  this.disabled = false;
139
144
  this.emptyText = '';
145
+ /** @ignore */
146
+ this.hasNow = false;
140
147
  this.labelHidden = false;
141
148
  /** @ignore */
142
149
  this.noValidateMinMax = false;
@@ -221,6 +228,7 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
221
228
  this.style.maxWidth = inputTextWidth;
222
229
 
223
230
  const clearButton = !this.required ? html`<d2l-button-subtle text="${this.localize(`${this._namespace}.clear`)}" @click="${this._handleClear}"></d2l-button-subtle>` : null;
231
+ const nowButton = this.hasNow ? html`<d2l-button-subtle text="${this.localize(`${this._namespace}.now`)}" @click="${this._handleSetToNow}"></d2l-button-subtle>` : null;
224
232
  const icon = (this.invalid || this.childErrors.size > 0)
225
233
  ? html`<d2l-icon icon="tier1:alert" slot="left" style="${styleMap({ color: 'var(--d2l-color-cinnabar)' })}"></d2l-icon>`
226
234
  : html`<d2l-icon icon="tier1:calendar" slot="left"></d2l-icon>`;
@@ -246,7 +254,8 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
246
254
  min-value="${ifDefined(this.minValue)}"
247
255
  selected-value="${ifDefined(this._shownValue)}">
248
256
  <div class="d2l-calendar-slot-buttons">
249
- <d2l-button-subtle text="${this.localize(`${this._namespace}.setToToday`)}" @click="${this._handleSetToToday}"></d2l-button-subtle>
257
+ <d2l-button-subtle text="${this.localize(`${this._namespace}.today`)}" @click="${this._handleSetToToday}"></d2l-button-subtle>
258
+ ${nowButton}
250
259
  ${clearButton}
251
260
  </div>
252
261
  </d2l-calendar>
@@ -290,7 +299,7 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
290
299
  ${!this._dropdownFirstOpened ? html`<div aria-hidden="true" class="d2l-input-date-hidden-calendar">
291
300
  <d2l-calendar selected-value="2018-09-08">
292
301
  <div class="d2l-calendar-slot-buttons">
293
- <d2l-button-subtle text="${this.localize(`${this._namespace}.setToToday`)}"></d2l-button-subtle>
302
+ <d2l-button-subtle text="${this.localize(`${this._namespace}.today`)}"></d2l-button-subtle>
294
303
  </div>
295
304
  </d2l-calendar>
296
305
  </div>` : null}
@@ -462,9 +471,13 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
462
471
  this.opened = !this.opened;
463
472
  }
464
473
 
465
- async _handleSetToToday() {
474
+ async _handleSetToNow() {
475
+ await this._handleSetToToday(undefined, true);
476
+ }
477
+
478
+ async _handleSetToToday(_, setToNow) {
466
479
  const date = getToday();
467
- await this._updateValueDispatchEvent(formatDateInISO(date));
480
+ await this._updateValueDispatchEvent(formatDateInISO(date), setToNow);
468
481
  if (this._dropdown) {
469
482
  this._dropdown.close();
470
483
  }
@@ -503,13 +516,18 @@ class InputDate extends LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCor
503
516
  this._formattedValue = this._shownValue ? formatISODateInUserCalDescriptor(this._shownValue) : (this.emptyText ? this.emptyText : '');
504
517
  }
505
518
 
506
- async _updateValueDispatchEvent(dateInISO) {
507
- if (dateInISO === this._shownValue) return; // prevent validation from happening multiple times for same change
519
+ async _updateValueDispatchEvent(dateInISO, setToNow) {
520
+ // prevent validation from happening multiple times for same change,
521
+ // except for now button that affects time
522
+ if (!setToNow && dateInISO === this._shownValue) return;
508
523
  this._shownValue = dateInISO;
509
524
  this.value = dateInISO;
510
525
  this.dispatchEvent(new CustomEvent(
511
- 'change',
512
- { bubbles: true, composed: false }
526
+ 'change', {
527
+ bubbles: true,
528
+ composed: false,
529
+ detail: { setToNow: setToNow }
530
+ }
513
531
  ));
514
532
  }
515
533
 
package/components/inputs/input-time.js CHANGED
@@ -47,6 +47,11 @@ export function getDefaultTime(time, enforceTimeIntervals, timeInterval) {
47
47
  return END_OF_DAY;
48
48
  case 'startOfDay':
49
49
  return enforceTimeIntervals ? MIDNIGHT : START_OF_DAY;
50
+ case 'now': {
51
+ const today = getToday();
52
+ const date = new Date(today.year, today.month - 1, today.date, today.hours, today.minutes, 0);
53
+ return enforceTimeIntervals ? getTimeAtInterval(timeInterval, date) : date;
54
+ }
50
55
  case undefined: {
51
56
  const today = getToday();
52
57
  const date = new Date(today.year, today.month - 1, today.date, today.hours, today.minutes, 0);
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/lang/ar.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "يجب أن يكون التاريخ بعد {minDate}",
51
51
  "components.input-date.errorOutsideRange": "يجب أن يكون التاريخ بين {minDate} و{maxDate}",
52
52
  "components.input-date.openInstructions": "استخدم تنسيق التاريخ {format}. انتقل إلى الأسفل أو اضغط على Enter للوصول إلى التقويم المصغّر.",
53
- "components.input-date.setToToday": "تعيين إلى اليوم",
53
+ "components.input-date.now": "الآن",
54
+ "components.input-date.today": "اليوم",
54
55
  "components.input-number.hintInteger": "يقبل هذا الحقل قيم الأعداد الصحيحة فقط (بدون أعداد عشرية)",
55
56
  "components.input-number.hintDecimalDuplicate": "يوجد عدد عشري في هذا الرقم",
56
57
  "components.input-number.hintDecimalIncorrectComma": "لإضافة عدد عشري، استخدم حرف الفاصلة \",\"",
package/lang/cy.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "Rhaid i'r dyddiad fod ar ôl {minDate}",
51
51
  "components.input-date.errorOutsideRange": "Rhaid i'r dyddiad fod rhwng {minDate} a {maxDate}",
52
52
  "components.input-date.openInstructions": "Defnyddio fformat dyddiad {format}. Pwyswch saeth i lawr neu Enter i gael mynediad at galendr bach.",
53
- "components.input-date.setToToday": "Gosod i Heddiw",
53
+ "components.input-date.now": "Nawr",
54
+ "components.input-date.today": "Heddiw",
54
55
  "components.input-number.hintInteger": "Mae'r maes hwn yn derbyn gwerthoedd cyfanrif yn unig (dim degolion)",
55
56
  "components.input-number.hintDecimalDuplicate": "Mae degol eisoes yn y nifer hwn",
56
57
  "components.input-number.hintDecimalIncorrectComma": "I ychwanegu degol defnyddiwch y nod coma \",”",
package/lang/da.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "Datoen skal være efter {minDate}",
51
51
  "components.input-date.errorOutsideRange": "Datoen skal være mellem {minDate} og {maxDate}",
52
52
  "components.input-date.openInstructions": "Brug datoformatet {format}. Tryk på Pil ned eller Enter for at få adgang til minikalender.",
53
- "components.input-date.setToToday": "Indstil til i dag",
53
+ "components.input-date.now": "Nu",
54
+ "components.input-date.today": "I dag",
54
55
  "components.input-number.hintInteger": "Dette felt accepterer kun heltalsværdier (ingen decimaler)",
55
56
  "components.input-number.hintDecimalDuplicate": "Der er allerede en decimal i dette tal",
56
57
  "components.input-number.hintDecimalIncorrectComma": "Hvis du vil tilføje en decimal, skal du bruge komma-tegnet \",\"",
package/lang/de.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "Datum muss nach {minDate} liegen",
51
51
  "components.input-date.errorOutsideRange": "Datum muss zwischen {minDate} und {maxDate} liegen",
52
52
  "components.input-date.openInstructions": "Das Datumsformat {format} verwenden. Minikalender durch Abwärtspfeil oder durch Drücken der Eingabetaste aufrufen.",
53
- "components.input-date.setToToday": "Auf den heutigen Tag einstellen",
53
+ "components.input-date.now": "Jetzt",
54
+ "components.input-date.today": "Heute",
54
55
  "components.input-number.hintInteger": "Dieses Feld akzeptiert nur Ganzzahlen (keine Dezimalstellen)",
55
56
  "components.input-number.hintDecimalDuplicate": "Diese Zahl enthält bereits eine Dezimale",
56
57
  "components.input-number.hintDecimalIncorrectComma": "Verwenden Sie zum Hinzufügen einer Dezimalstelle das Komma \",“",
package/lang/en.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "Date must be after {minDate}",
51
51
  "components.input-date.errorOutsideRange": "Date must be between {minDate} and {maxDate}",
52
52
  "components.input-date.openInstructions": "Use date format {format}. Arrow down or press enter to access mini-calendar.",
53
- "components.input-date.setToToday": "Set to Today",
53
+ "components.input-date.now": "Now",
54
+ "components.input-date.today": "Today",
54
55
  "components.input-number.hintInteger": "This field only accepts integer values (no decimals)",
55
56
  "components.input-number.hintDecimalDuplicate": "There's already a decimal in this number",
56
57
  "components.input-number.hintDecimalIncorrectComma": "To add a decimal use the comma \",\" character",
package/lang/es-es.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "La fecha debe ser posterior al {minDate}",
51
51
  "components.input-date.errorOutsideRange": "La fecha debe estar entre el {minDate} y el {maxDate}",
52
52
  "components.input-date.openInstructions": "Usar formato de fecha {format}. Use la fecha hacia abajo o pulse Intro para acceder al minicalendario.",
53
- "components.input-date.setToToday": "Establezca la fecha en Hoy",
53
+ "components.input-date.now": "Ahora",
54
+ "components.input-date.today": "Hoy",
54
55
  "components.input-number.hintInteger": "Este campo sólo acepta valores enteros (sin decimales)",
55
56
  "components.input-number.hintDecimalDuplicate": "Ya hay un decimal en este número",
56
57
  "components.input-number.hintDecimalIncorrectComma": "Para agregar un decimal, utilice la coma \",\"",
package/lang/es.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "La fecha debe ser posterior a {minDate}",
51
51
  "components.input-date.errorOutsideRange": "La fecha debe estar entre {minDate} y {maxDate}",
52
52
  "components.input-date.openInstructions": "Utilice el formato de fecha {format}. Presione la flecha hacia abajo o Intro para acceder al minicalendario.",
53
- "components.input-date.setToToday": "Establecer para hoy",
53
+ "components.input-date.now": "Ahora",
54
+ "components.input-date.today": "Hoy",
54
55
  "components.input-number.hintInteger": "Este campo solo acepta valores enteros (sin decimales)",
55
56
  "components.input-number.hintDecimalDuplicate": "Ya hay un decimal en este número",
56
57
  "components.input-number.hintDecimalIncorrectComma": "Para agregar un decimal, use el carácter coma (“,”)",
package/lang/fr-fr.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "La date doit être postérieure à {minDate}",
51
51
  "components.input-date.errorOutsideRange": "La date doit être comprise entre {minDate} et {maxDate}",
52
52
  "components.input-date.openInstructions": "Utiliser le format de date {format}. Utilisez la flèche vers le bas ou appuyez sur Entrée pour accéder au mini-calendrier.",
53
- "components.input-date.setToToday": "Défini sur Aujourd'hui",
53
+ "components.input-date.now": "Maintenant",
54
+ "components.input-date.today": "Aujourd’hui",
54
55
  "components.input-number.hintInteger": "Ce champ accepte uniquement les valeurs entières (pas de décimales)",
55
56
  "components.input-number.hintDecimalDuplicate": "Il existe déjà une décimale dans ce nombre",
56
57
  "components.input-number.hintDecimalIncorrectComma": "Pour ajouter une décimale, utilisez la virgule « , »",
package/lang/fr.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "La date doit être postérieure à {minDate}",
51
51
  "components.input-date.errorOutsideRange": "La date doit être comprise entre {minDate} et {maxDate}",
52
52
  "components.input-date.openInstructions": "Utiliser le format de date {format}. Utiliser la flèche vers le bas ou la touche d'entrée pour accéder au mini-calendrier.",
53
- "components.input-date.setToToday": "Régler à aujourd'hui",
53
+ "components.input-date.now": "Maintenant",
54
+ "components.input-date.today": "Aujourd'hui",
54
55
  "components.input-number.hintInteger": "Ce champ accepte uniquement les valeurs entières (sans décimales)",
55
56
  "components.input-number.hintDecimalDuplicate": "Ce nombre comporte déjà une décimale",
56
57
  "components.input-number.hintDecimalIncorrectComma": "Pour ajouter une décimale, utilisez la virgule « , »",
package/lang/ja.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "日付は {minDate} より後にする必要があります",
51
51
  "components.input-date.errorOutsideRange": "日付は {minDate} から {maxDate} の間にする必要があります",
52
52
  "components.input-date.openInstructions": "日付形式 {format} を使用します。ミニカレンダーにアクセスするには下矢印を使うか Enter を押します。",
53
- "components.input-date.setToToday": "今日に設定",
53
+ "components.input-date.now": "現在",
54
+ "components.input-date.today": "今日",
54
55
  "components.input-number.hintInteger": "このフィールドには整数値のみ入力できます（小数不可）。",
55
56
  "components.input-number.hintDecimalDuplicate": "この数値にはすでに小数があります",
56
57
  "components.input-number.hintDecimalIncorrectComma": "小数を追加するには、カンマ「,」文字を使用します",
package/lang/ko.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "날짜는 {minDate} 이후여야 합니다.",
51
51
  "components.input-date.errorOutsideRange": "날짜는 {minDate}와 {maxDate} 사이여야 합니다.",
52
52
  "components.input-date.openInstructions": "{format} 날짜 형식을 사용하십시오. 미니 달력에 접근하려면 아래쪽 화살표를 누르거나 Enter 키를 누르십시오.",
53
- "components.input-date.setToToday": "오늘로 설정",
53
+ "components.input-date.now": "현재",
54
+ "components.input-date.today": "오늘",
54
55
  "components.input-number.hintInteger": "이 필드는 정수 값만 허용합니다(소수점 없음)",
55
56
  "components.input-number.hintDecimalDuplicate": "이 숫자에 이미 소수점이 있습니다",
56
57
  "components.input-number.hintDecimalIncorrectComma": "소수점을 추가하려면 쉼표 \",\" 문자를 사용합니다",
package/lang/nl.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "Datum moet na {minDate} liggen",
51
51
  "components.input-date.errorOutsideRange": "Datum moet tussen {minDate} en {maxDate} liggen",
52
52
  "components.input-date.openInstructions": "Gebruik datumnotatie {format}. Gebruik Pijl omlaag of druk op Enter om de mini-agenda te openen.",
53
- "components.input-date.setToToday": "Instellen op Vandaag",
53
+ "components.input-date.now": "Nu",
54
+ "components.input-date.today": "Vandaag",
54
55
  "components.input-number.hintInteger": "Dit veld accepteert alleen gehele getallen (geen decimalen)",
55
56
  "components.input-number.hintDecimalDuplicate": "Dit getal bevat al een decimaal",
56
57
  "components.input-number.hintDecimalIncorrectComma": "Als u een decimaal wilt toevoegen, gebruikt u het teken ','",
package/lang/pt.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "A data precisa ser posterior a {minDate}",
51
51
  "components.input-date.errorOutsideRange": "A data precisa estar entre {minDate} e {maxDate}",
52
52
  "components.input-date.openInstructions": "Adote o formato de data {format}. Use a tecla de seta para baixo ou pressione Enter para acessar o minicalendário.",
53
- "components.input-date.setToToday": "Definir como Hoje",
53
+ "components.input-date.now": "Agora",
54
+ "components.input-date.today": "Hoje",
54
55
  "components.input-number.hintInteger": "Este campo aceita apenas valores inteiros (não decimais)",
55
56
  "components.input-number.hintDecimalDuplicate": "Já existe um decimal neste número",
56
57
  "components.input-number.hintDecimalIncorrectComma": "Para adicionar um decimal, use o caractere vírgula “,”",
package/lang/sv.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "Datumet måste vara efter {minDate}",
51
51
  "components.input-date.errorOutsideRange": "Datumet ska vara mellan {minDate} och {maxDate}",
52
52
  "components.input-date.openInstructions": "Använd datumformatet {format}. Om du vill visa minikalendern trycker du på nedåtpil eller Enter.",
53
- "components.input-date.setToToday": "Ange till i dag",
53
+ "components.input-date.now": "Nu",
54
+ "components.input-date.today": "Idag",
54
55
  "components.input-number.hintInteger": "I det här fältet accepteras endast heltalsvärden (inga decimaler)",
55
56
  "components.input-number.hintDecimalDuplicate": "Det finns redan en decimal i det här talet",
56
57
  "components.input-number.hintDecimalIncorrectComma": "Om du vill lägga till en decimal använder du kommatecknet \",\"",
package/lang/tr.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "Tarih, {minDate} tarihinden sonra olmalıdır",
51
51
  "components.input-date.errorOutsideRange": "Tarih, {minDate} ile {maxDate} arasında olmalıdır",
52
52
  "components.input-date.openInstructions": "{format} tarih formatını kullanın. Küçük takvime erişmek için aşağı okunu kullanın veya enter tuşuna basın.",
53
- "components.input-date.setToToday": "Bugün olarak ayarlayın",
53
+ "components.input-date.now": "Şimdi",
54
+ "components.input-date.today": "Bugün",
54
55
  "components.input-number.hintInteger": "Bu alanda yalnızca tam sayı değerleri kabul edilir (ondalık sayı kabul edilmez)",
55
56
  "components.input-number.hintDecimalDuplicate": "Bu sayıda zaten bir ondalık var",
56
57
  "components.input-number.hintDecimalIncorrectComma": "Ondalık sayı eklemek için virgül \",\" karakterini kullanın",
package/lang/zh-tw.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "日期必須晚於 {minDate}",
51
51
  "components.input-date.errorOutsideRange": "日期必須介於 {minDate} 與 {maxDate} 之間",
52
52
  "components.input-date.openInstructions": "使用日期格式 {format}。按向下箭頭，或按下「Enter」以存取迷你行事曆。",
53
- "components.input-date.setToToday": "設為今天",
53
+ "components.input-date.now": "立即",
54
+ "components.input-date.today": "今天",
54
55
  "components.input-number.hintInteger": "此欄位僅接受整數值 (無小數位數)",
55
56
  "components.input-number.hintDecimalDuplicate": "這個數字已經有一個小數位數",
56
57
  "components.input-number.hintDecimalIncorrectComma": "若要新增小數位數，請使用逗號「,」字元",
package/lang/zh.js CHANGED
@@ -50,7 +50,8 @@ export default {
50
50
  "components.input-date.errorMinDateOnly": "日期必须晚于 {minDate}",
51
51
  "components.input-date.errorOutsideRange": "日期必须介于 {minDate} 和 {maxDate} 之间",
52
52
  "components.input-date.openInstructions": "使用日期格式 {format}。利用向下箭头键或按 Enter 键访问迷你日历。",
53
- "components.input-date.setToToday": "设置为“今天”",
53
+ "components.input-date.now": "现在",
54
+ "components.input-date.today": "今天",
54
55
  "components.input-number.hintInteger": "此字段只接受整数值（无小数）",
55
56
  "components.input-number.hintDecimalDuplicate": "此数中已有一个小数",
56
57
  "components.input-number.hintDecimalIncorrectComma": "要添加小数，请使用逗号“,”字符",
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.206.1",
3
+ "version": "1.207.3",
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",