@brightspace-ui/core 3.219.9 → 3.220.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/components/colors/colors.js +122 -10
  2. package/components/demo/demo-color-mode.js +12 -0
  3. package/components/demo/demo-page-settings.js +42 -19
  4. package/components/demo/demo-page.js +2 -2
  5. package/components/demo/demo-snippet.js +5 -5
  6. package/components/demo/styles.css +1 -1
  7. package/components/expand-collapse/demo/expand-collapse-content.html +3 -1
  8. package/components/expand-collapse/expand-collapse-content.js +33 -57
  9. package/package.json +1 -1
  10. package/components/demo/demo-theme.js +0 -7
package/components/colors/colors.js CHANGED
@@ -3,16 +3,128 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
3
3
  style.id = 'd2l-colors';
4
4
 
5
5
  const lightPalette = `
6
- --d2l-color-background-base: var(--d2l-color-sylvite);
7
- --d2l-color-background-default: #ffffff;
8
- --d2l-color-border-medium: var(--d2l-color-mica);
9
- --d2l-color-font-base: var(--d2l-color-ferrite);
6
+ --d2l-sem-background-color-base: #ffffff;
7
+ --d2l-sem-background-color-elevated: var(--d2l-sem-background-color-base);
8
+ --d2l-sem-background-color-floating: var(--d2l-sem-background-color-base);
9
+ --d2l-sem-background-color-interactive-faint-default: var(--d2l-color-regolith);
10
+ --d2l-sem-background-color-interactive-faint-hover: var(--d2l-color-sylvite);
11
+ --d2l-sem-background-color-interactive-highlighted: var(--d2l-sem-brand-color-highlight);
12
+ --d2l-sem-background-color-interactive-primary-default: var(--d2l-sem-brand-color-primary-default);
13
+ --d2l-sem-background-color-interactive-primary-hover: var(--d2l-sem-brand-color-primary-hover);
14
+ --d2l-sem-background-color-interactive-secondary-default: var(--d2l-color-gypsum);
15
+ --d2l-sem-background-color-interactive-secondary-hover: var(--d2l-color-mica);
16
+ --d2l-sem-background-color-interactive-tertiary-default: #ffffff;
17
+ --d2l-sem-background-color-interactive-tertiary-hover: var(--d2l-sem-background-color-interactive-secondary-default);
18
+ --d2l-sem-background-color-interactive-translucent-default: #000000;
19
+ --d2l-sem-background-color-interactive-translucent-hover: var(--d2l-sem-brand-color-primary-default);
20
+ --d2l-sem-background-color-sunken: #f6f7f8;
21
+ --d2l-sem-border-color-emphasized: var(--d2l-color-galena);
22
+ --d2l-sem-border-color-focus: var(--d2l-color-celestine);
23
+ --d2l-sem-border-color-standard: var(--d2l-color-mica);
24
+ --d2l-sem-border-color-subtle: var(--d2l-color-gypsum);
25
+ --d2l-sem-brand-color-highlight: var(--d2l-color-celestine-plus-2);
26
+ --d2l-sem-brand-color-primary-default: var(--d2l-color-celestine);
27
+ --d2l-sem-brand-color-primary-hover: var(--d2l-color-celestine-minus-1);
28
+ --d2l-sem-icon-color-faint: var(--d2l-sem-border-color-standard);
29
+ --d2l-sem-icon-color-inverted: #ffffff;
30
+ --d2l-sem-icon-color-standard: var(--d2l-color-tungsten);
31
+ --d2l-sem-status-color-default: var(--d2l-color-celestine);
32
+ --d2l-sem-status-color-error: var(--d2l-color-cinnabar);
33
+ --d2l-sem-status-color-success-text: var(--d2l-color-olivine-minus-1);
34
+ --d2l-sem-status-color-success: var(--d2l-color-olivine);
35
+ --d2l-sem-status-color-warning-text: var(--d2l-color-carnelian-minus-1);
36
+ --d2l-sem-status-color-warning: var(--d2l-color-carnelian);
37
+ --d2l-sem-text-color-interactive-default: var(--d2l-sem-brand-color-primary-default);
38
+ --d2l-sem-text-color-interactive-hover: var(--d2l-sem-brand-color-primary-hover);
39
+ --d2l-sem-text-color-static-faint: var(--d2l-color-galena);
40
+ --d2l-sem-text-color-static-inverted: #ffffff;
41
+ --d2l-sem-text-color-static-standard: var(--d2l-color-ferrite);
42
+ --d2l-sem-text-color-static-subtle: var(--d2l-color-tungsten);
43
+
44
+ --d2l-sem-opacity-disabled-control: 0.5;
45
+ --d2l-sem-opacity-disabled-link: 0.74;
46
+ --d2l-sem-opacity-disabled-linkicon: 0.64;
47
+
48
+ --d2l-sem-shadow-attached-color: rgba(0, 0, 0, 0.03);
49
+ --d2l-sem-shadow-attached-offset-x: 0;
50
+ --d2l-sem-shadow-attached-offset-y: 2px;
51
+ --d2l-sem-shadow-attached-blur: 4px;
52
+ --d2l-sem-shadow-attached-spread: 0;
53
+ --d2l-sem-shadow-attached: var(--d2l-shadow-attached-offset-x) var(--d2l-shadow-attached-offset-y) var(--d2l-shadow-attached-blur) var(--d2l-shadow-attached-spread) var(--d2l-shadow-attached-color);
54
+ --d2l-sem-shadow-floating-color: rgba(0, 0, 0, 0.15);
55
+ --d2l-sem-shadow-floating-offset-x: 0;
56
+ --d2l-sem-shadow-floating-offset-y: 2px;
57
+ --d2l-sem-shadow-floating-blur: 12px;
58
+ --d2l-sem-shadow-floating-spread: 0;
59
+ --d2l-sem-shadow-floating: var(--d2l-shadow-floating-offset-x) var(--d2l-shadow-floating-offset-y) var(--d2l-shadow-floating-blur) var(--d2l-shadow-floating-spread) var(--d2l-shadow-floating-color);
60
+ --d2l-sem-shadow-inset-color: rgba(177, 185, 190, 0.2); /* corundum */
61
+ --d2l-sem-shadow-inset-offset-x: 0;
62
+ --d2l-sem-shadow-inset-offset-y: 2px;
63
+ --d2l-sem-shadow-inset-blur: 0;
64
+ --d2l-sem-shadow-inset-spread: 0;
65
+ --d2l-sem-shadow-inset: inset var(--d2l-shadow-inset-offset-x) var(--d2l-shadow-inset-offset-y) var(--d2l-shadow-inset-blur) var(--d2l-shadow-inset-spread) var(--d2l-shadow-inset-color);
10
66
  `;
11
67
  const darkPalette = `
12
- --d2l-color-background-base: #000000;
13
- --d2l-color-background-default: #18191a; /* new color */
14
- --d2l-color-border-medium: var(--d2l-color-tungsten);
15
- --d2l-color-font-base: var(--d2l-color-regolith);
68
+ --d2l-sem-background-color-base: #161718;
69
+ --d2l-sem-background-color-elevated: var(--d2l-color-ferrite);
70
+ --d2l-sem-background-color-floating: var(--d2l-color-ferrite);
71
+ --d2l-sem-background-color-interactive-faint-default: var(--d2l-color-ferrite);
72
+ --d2l-sem-background-color-interactive-faint-hover: #303335;
73
+ --d2l-sem-background-color-interactive-highlighted: var(--d2l-sem-brand-color-highlight);
74
+ --d2l-sem-background-color-interactive-primary-default: var(--d2l-sem-brand-color-primary-default);
75
+ --d2l-sem-background-color-interactive-primary-hover: var(--d2l-sem-brand-color-primary-hover);
76
+ --d2l-sem-background-color-interactive-secondary-default: #303335;
77
+ --d2l-sem-background-color-interactive-secondary-hover: var(--d2l-color-ferrite);
78
+ --d2l-sem-background-color-interactive-tertiary-default: #000000;
79
+ --d2l-sem-background-color-interactive-tertiary-hover: var(--d2l-sem-background-color-interactive-secondary-default);
80
+ --d2l-sem-background-color-interactive-translucent-default: #000000;
81
+ --d2l-sem-background-color-interactive-translucent-hover: var(--d2l-sem-brand-color-primary-default);
82
+ --d2l-sem-background-color-sunken: #000000;
83
+ --d2l-sem-border-color-emphasized: var(--d2l-color-galena);
84
+ --d2l-sem-border-color-focus: var(--d2l-color-celestine-plus-1);
85
+ --d2l-sem-border-color-standard: var(--d2l-color-tungsten);
86
+ --d2l-sem-border-color-subtle: #303335;
87
+ --d2l-sem-brand-color-highlight: #161718;
88
+ --d2l-sem-brand-color-primary-default: var(--d2l-color-celestine-plus-1);
89
+ --d2l-sem-brand-color-primary-hover: var(--d2l-color-celestine);
90
+ --d2l-sem-icon-color-faint: var(--d2l-sem-border-color-standard);
91
+ --d2l-sem-icon-color-inverted: #ffffff;
92
+ --d2l-sem-icon-color-standard: var(--d2l-color-corundum);
93
+ --d2l-sem-status-color-default: var(--d2l-sem-brand-color-primary-default);
94
+ --d2l-sem-status-color-error: var(--d2l-color-cinnabar-plus-1);
95
+ --d2l-sem-status-color-success-text: #ffffff;
96
+ --d2l-sem-status-color-success: var(--d2l-color-olivine);
97
+ --d2l-sem-status-color-warning-text: var(--d2l-color-carnelian);
98
+ --d2l-sem-status-color-warning: var(--d2l-color-carnelian);
99
+ --d2l-sem-text-color-interactive-default: var(--d2l-sem-brand-color-primary-default);
100
+ --d2l-sem-text-color-interactive-hover: var(--d2l-sem-brand-color-primary-hover);
101
+ --d2l-sem-text-color-static-faint: var(--d2l-color-galena);
102
+ --d2l-sem-text-color-static-inverted: #161718;
103
+ --d2l-sem-text-color-static-standard: var(--d2l-color-mica);
104
+ --d2l-sem-text-color-static-subtle: var(--d2l-color-chromite);
105
+
106
+ --d2l-sem-opacity-disabled-control: 0.5;
107
+ --d2l-sem-opacity-disabled-link: 0.74;
108
+ --d2l-sem-opacity-disabled-linkicon: 0.64;
109
+
110
+ --d2l-sem-shadow-attached-color: rgba(0, 0, 0, 0.03);
111
+ --d2l-sem-shadow-attached-offset-x: 0;
112
+ --d2l-sem-shadow-attached-offset-y: 2px;
113
+ --d2l-sem-shadow-attached-blur: 4px;
114
+ --d2l-sem-shadow-attached-spread: 0;
115
+ --d2l-sem-shadow-attached: var(--d2l-shadow-attached-offset-x) var(--d2l-shadow-attached-offset-y) var(--d2l-shadow-attached-blur) var(--d2l-shadow-attached-spread) var(--d2l-shadow-attached-color);
116
+ --d2l-sem-shadow-floating-color: rgba(0, 0, 0, 0.85);
117
+ --d2l-sem-shadow-floating-offset-x: 0;
118
+ --d2l-sem-shadow-floating-offset-y: 2px;
119
+ --d2l-sem-shadow-floating-blur: 12px;
120
+ --d2l-sem-shadow-floating-spread: 0;
121
+ --d2l-sem-shadow-floating: var(--d2l-shadow-floating-offset-x) var(--d2l-shadow-floating-offset-y) var(--d2l-shadow-floating-blur) var(--d2l-shadow-floating-spread) var(--d2l-shadow-floating-color);
122
+ --d2l-sem-shadow-inset-color: rgba(177, 185, 190, 0.2); /* corundum */
123
+ --d2l-sem-shadow-inset-offset-x: 0;
124
+ --d2l-sem-shadow-inset-offset-y: 2px;
125
+ --d2l-sem-shadow-inset-blur: 0;
126
+ --d2l-sem-shadow-inset-spread: 0;
127
+ --d2l-sem-shadow-inset: inset var(--d2l-shadow-inset-offset-x) var(--d2l-shadow-inset-offset-y) var(--d2l-shadow-inset-blur) var(--d2l-shadow-inset-spread) var(--d2l-shadow-inset-color);
16
128
  `;
17
129
 
18
130
  style.textContent = `
@@ -109,11 +221,11 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
109
221
  html {
110
222
  ${lightPalette}
111
223
  }
112
- html[data-theme="dark"] {
224
+ html[data-color-mode="dark"] {
113
225
  ${darkPalette}
114
226
  }
115
227
  @media (prefers-color-scheme: dark) {
116
- html[data-theme="os"] {
228
+ html[data-color-mode="os"] {
117
229
  ${darkPalette}
118
230
  }
119
231
  }
package/components/demo/demo-color-mode.js ADDED
@@ -0,0 +1,12 @@
1
+ export const colorModes = ['light', 'dark', 'os'];
2
+ export const defaultColorMode = 'light';
3
+
4
+ const urlParams = new URLSearchParams(window.location.search);
5
+ const requestedColorMode = urlParams.get('color-mode');
6
+
7
+ const colorMode = colorModes.includes(requestedColorMode) ? requestedColorMode : localStorage.getItem('color-mode');
8
+ if (colorMode) {
9
+ document.documentElement.dataset.colorMode = colorMode;
10
+ } else {
11
+ delete document.documentElement.dataset.colorMode;
12
+ }
package/components/demo/demo-page-settings.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import './demo-flags.js';
2
- import './demo-theme.js';
3
2
  import '../button/button.js';
4
3
  import '../inputs/input-checkbox-group.js';
5
4
  import '../inputs/input-checkbox.js';
5
+ import '../inputs/input-fieldset.js';
6
6
  import '../inputs/input-group.js';
7
7
  import '../collapsible-panel/collapsible-panel.js';
8
8
  import '../collapsible-panel/collapsible-panel-summary-item.js';
9
+ import { colorModes, defaultColorMode } from './demo-color-mode.js';
9
10
  import { css, html, LitElement, nothing } from 'lit';
10
11
  import { getDocumentLocaleSettings, supportedLocalesDetails } from '@brightspace-ui/intl/lib/common.js';
11
12
  import { getFlagOverrides, getKnownFlags } from '../../helpers/flags.js';
@@ -13,7 +14,6 @@ import { inputLabelStyles } from '../inputs/input-label-styles.js';
13
14
  import { selectStyles } from '../inputs/input-select-styles.js';
14
15
 
15
16
  const localeSettings = getDocumentLocaleSettings();
16
- const defaultTheme = 'light';
17
17
 
18
18
  class DemoPageSettings extends LitElement {
19
19
 
@@ -35,8 +35,14 @@ class DemoPageSettings extends LitElement {
35
35
  d2l-collapsible-panel {
36
36
  width: 100%;
37
37
  }
38
+ .color-mode-group {
39
+ display: inline-flex;
40
+ }
38
41
  #applyFlagsButton {
39
- margin-block-start: 1rem;
42
+ max-width: max-content;
43
+ }
44
+ #useAsDefaultColorMode {
45
+ margin-block-end: 0;
40
46
  }
41
47
  `];
42
48
  }
@@ -54,7 +60,7 @@ class DemoPageSettings extends LitElement {
54
60
  } else {
55
61
  this._language = getDocumentLocaleSettings().language;
56
62
  }
57
- this._theme = document.documentElement.dataset.theme || defaultTheme;
63
+ this._colorMode = document.documentElement.dataset.colorMode || defaultColorMode;
58
64
  }
59
65
 
60
66
  connectedCallback() {
@@ -84,7 +90,7 @@ class DemoPageSettings extends LitElement {
84
90
  languageItem = html`<d2l-collapsible-panel-summary-item slot="summary" text="Language: ${selectedLanguageCode}"></d2l-collapsible-panel-summary-item>`;
85
91
  }
86
92
 
87
- const themeOptions = ['light', 'dark', 'os'].map(theme => html`<option value="${theme}" ?selected="${this._theme === theme}">${theme}</option>`);
93
+ const colorModeOptions = colorModes.map(colorMode => html`<option value="${colorMode}" ?selected="${this._colorMode === colorMode}">${colorMode}</option>`);
88
94
 
89
95
  const knownFlags = this.#getKnownFlagsSorted();
90
96
  const knownFlagCheckboxes = [];
@@ -107,15 +113,19 @@ class DemoPageSettings extends LitElement {
107
113
  <span class="d2l-input-label">Language</span>
108
114
  <select class="d2l-input-select" @change="${this.#handleLanguageChange}">${languageOptions}</select>
109
115
  </label>
110
- <label>
111
- <span class="d2l-input-label">Theme</span>
112
- <select class="d2l-input-select" @change="${this.#handleThemeChange}">${themeOptions}</select>
113
- </label>
116
+
117
+ <d2l-input-fieldset label="Color Mode">
118
+ <d2l-input-group class="color-mode-group">
119
+ <select id="colorMode" aria-label="Color Mode" class="d2l-input-select" @change="${this.#handleColorModeChange}">${colorModeOptions}</select>
120
+ <d2l-input-checkbox id="useAsDefaultColorMode" label="Use as Default" @change="${this.#handleUseAsDefaultColorModeChange}"></d2l-input-checkbox>
121
+ </d2l-input-group>
122
+ </d2l-input-fieldset>
123
+
114
124
  ${knownFlagCheckboxes.length > 0 ? html`
115
125
  <d2l-input-checkbox-group id="flagsCheckboxGroup" label="Flags">
116
126
  ${knownFlagCheckboxes}
117
127
  </d2l-input-checkbox-group>
118
- <d2l-button id="applyFlagsButton" @click="${this.#handleApplyFlagsClick}">Apply</d2l-button>
128
+ <d2l-button id="applyFlagsButton" @click="${this.#handleApplyFlagsClick}">Apply Flags</d2l-button>
119
129
  ` : 'No known flags'}
120
130
  </d2l-input-group>
121
131
  ${languageItem}
@@ -156,6 +166,20 @@ class DemoPageSettings extends LitElement {
156
166
  window.location.search = urlParams.toString();
157
167
  }
158
168
 
169
+ #handleColorModeChange(e) {
170
+ const newColorMode = e.target[e.target.selectedIndex].value;
171
+ document.documentElement.dataset.colorMode = newColorMode;
172
+ const url = new URL(window.location.href);
173
+
174
+ const useAsDefault = this.shadowRoot.querySelector('#useAsDefaultColorMode').checked;
175
+ if (useAsDefault) {
176
+ this.#updateDefaultColorMode(newColorMode);
177
+ }
178
+
179
+ url.searchParams.set('color-mode', newColorMode);
180
+ window.history.replaceState({}, '', url.toString());
181
+ }
182
+
159
183
  #handleDocumentLanguageChange() {
160
184
  this._language = localeSettings.language;
161
185
  const url = new URL(window.location.href);
@@ -177,16 +201,15 @@ class DemoPageSettings extends LitElement {
177
201
  document.documentElement.lang = newLanguageCode;
178
202
  }
179
203
 
180
- #handleThemeChange(e) {
181
- const newTheme = e.target[e.target.selectedIndex].value;
182
- document.documentElement.setAttribute('data-theme', newTheme);
183
- const url = new URL(window.location.href);
184
- if (newTheme === defaultTheme) {
185
- url.searchParams.delete('theme');
186
- } else {
187
- url.searchParams.set('theme', newTheme);
204
+ #handleUseAsDefaultColorModeChange(e) {
205
+ const useAsDefault = e.target.checked;
206
+ if (useAsDefault) {
207
+ this.#updateDefaultColorMode(this.shadowRoot.querySelector('#colorMode').value);
188
208
  }
189
- window.history.replaceState({}, '', url.toString());
209
+ }
210
+
211
+ #updateDefaultColorMode(colorMode) {
212
+ localStorage.setItem('color-mode', colorMode);
190
213
  }
191
214
 
192
215
  }
package/components/demo/demo-page.js CHANGED
@@ -31,7 +31,7 @@ class DemoPage extends LitElement {
31
31
  static get styles() {
32
32
  return [ css`
33
33
  :host {
34
- background-color: var(--d2l-color-background-base);
34
+ background-color: var(--d2l-sem-background-color-sunken);
35
35
  display: block;
36
36
  padding: 30px;
37
37
  }
@@ -46,7 +46,7 @@ class DemoPage extends LitElement {
46
46
  }
47
47
  .d2l-demo-page-content > ::slotted(h2),
48
48
  .d2l-demo-page-content > ::slotted(h3) {
49
- color: var(--d2l-color-font-base);
49
+ color: var(--d2l-sem-text-color-static-standard);
50
50
  font-size: 0.8rem;
51
51
  font-weight: 700;
52
52
  line-height: 1.2rem;
package/components/demo/demo-snippet.js CHANGED
@@ -24,8 +24,8 @@ class DemoSnippet extends LitElement {
24
24
  static get styles() {
25
25
  return css`
26
26
  :host {
27
- background-color: var(--d2l-color-background-default);
28
- border: 1px solid var(--d2l-color-border-medium);
27
+ background-color: var(--d2l-sem-background-color-base);
28
+ border: 1px solid var(--d2l-sem-border-color-standard);
29
29
  border-radius: 6px;
30
30
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
31
31
  display: block;
@@ -41,7 +41,7 @@ class DemoSnippet extends LitElement {
41
41
  display: flex;
42
42
  }
43
43
  .d2l-demo-snippet-demo-wrapper.fullscreen {
44
- background-color: var(--d2l-color-background-default);
44
+ background-color: var(--d2l-sem-background-color-base);
45
45
  height: 100vh;
46
46
  inset: 0;
47
47
  overflow: auto;
@@ -67,7 +67,7 @@ class DemoSnippet extends LitElement {
67
67
  padding: 0;
68
68
  }
69
69
  .d2l-demo-snippet-settings {
70
- border-inline-start: 1px solid var(--d2l-color-border-medium);
70
+ border-inline-start: 1px solid var(--d2l-sem-border-color-standard);
71
71
  flex: 0 0 auto;
72
72
  padding: 6px;
73
73
  }
@@ -76,7 +76,7 @@ class DemoSnippet extends LitElement {
76
76
  top: 0;
77
77
  }
78
78
  d2l-dropdown.settings-dropdown {
79
- background-color: var(--d2l-color-background-default);
79
+ background-color: var(--d2l-sem-background-color-base);
80
80
  border-radius: 6px;
81
81
  outline: 1px solid var(--d2l-color-celestine-minus-1);
82
82
  position: fixed;
package/components/demo/styles.css CHANGED
@@ -1,5 +1,5 @@
1
1
  html {
2
- background-color: var(--d2l-color-background-base);
2
+ background-color: var(--d2l-sem-background-color-base);
3
3
  font-size: 20px;
4
4
  }
5
5
  body {
package/components/expand-collapse/demo/expand-collapse-content.html CHANGED
@@ -40,11 +40,13 @@
40
40
  </d2l-expand-collapse-content>
41
41
  <script type="module">
42
42
  const button = document.querySelector('d2l-button');
43
+ const section = document.querySelector('d2l-expand-collapse-content');
43
44
  button.addEventListener('click', () => {
44
- const section = document.querySelector('d2l-expand-collapse-content');
45
45
  section.expanded = !section.expanded;
46
46
  button.setAttribute('expanded', section.expanded ? 'true' : 'false');
47
47
  });
48
+ section.addEventListener('d2l-expand-collapse-content-collapse', () => console.log('collapsed'));
49
+ section.addEventListener('d2l-expand-collapse-content-expand', () => console.log('expanded'));
48
50
  </script>
49
51
  </template>
50
52
  </d2l-demo-snippet>
package/components/expand-collapse/expand-collapse-content.js CHANGED
@@ -86,7 +86,6 @@ class ExpandCollapseContent extends LitElement {
86
86
  super();
87
87
  this.expanded = false;
88
88
  this._height = '0';
89
- this._isFirstUpdate = true;
90
89
  this._state = states.COLLAPSED;
91
90
  this._reduceMotion = reduceMotion;
92
91
  }
@@ -94,7 +93,7 @@ class ExpandCollapseContent extends LitElement {
94
93
  render() {
95
94
  const styles = { height: this._height };
96
95
  return html`
97
- <div class="d2l-expand-collapse-content-container" data-state="${this._state}" @transitionend=${this._onTransitionEnd} style=${styleMap(styles)}>
96
+ <div class="d2l-expand-collapse-content-container" data-state="${this._state}" @transitionend=${this.#resolveTransition} style=${styleMap(styles)}>
98
97
  <div class="d2l-expand-collapse-content-inner">
99
98
  <slot></slot>
100
99
  </div>
@@ -102,75 +101,52 @@ class ExpandCollapseContent extends LitElement {
102
101
  `;
103
102
  }
104
103
 
105
- updated(changedProperties) {
106
- super.updated(changedProperties);
104
+ willUpdate(changedProperties) {
105
+ super.willUpdate(changedProperties);
107
106
  if (changedProperties.has('expanded')) {
108
- this._expandedChanged(this.expanded, this._isFirstUpdate);
109
- this._isFirstUpdate = false;
107
+ if (!this.hasUpdated) this.#resolveTransition();
108
+ else this._expandedChanged();
110
109
  }
111
110
  }
112
111
 
113
- async _expandedChanged(val, firstUpdate) {
112
+ async _expandedChanged() {
114
113
  const eventPromise = new Promise(resolve => this._eventPromiseResolve = resolve);
115
- if (val) {
116
- if (!firstUpdate) {
117
- this.dispatchEvent(new CustomEvent(
118
- 'd2l-expand-collapse-content-expand',
119
- { bubbles: true, detail: { expandComplete: eventPromise } }
120
- ));
121
- }
122
- if (this._reduceMotion || firstUpdate) {
123
- this._setExpanded();
124
- } else {
125
- this._state = states.PREEXPANDING;
126
- await this.updateComplete;
127
- await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
128
- if (this._state === states.PREEXPANDING) {
129
- this._state = states.EXPANDING;
130
- const content = this.shadowRoot?.querySelector('.d2l-expand-collapse-content-inner');
131
- const contentHeight = content?.scrollHeight;
132
- if (contentHeight) this._height = `${contentHeight}px`;
133
- if (contentHeight === 0) this._setExpanded();
134
- }
114
+ this.dispatchEvent(new CustomEvent(
115
+ this.expanded ? 'd2l-expand-collapse-content-expand' : 'd2l-expand-collapse-content-collapse',
116
+ { bubbles: true, detail: { [this.expanded ? 'expandComplete' : 'collapseComplete']: eventPromise } }
117
+ ));
118
+ if (this._reduceMotion) {
119
+ this.#resolveTransition();
120
+ } else if (this.expanded) {
121
+ this._state = states.PREEXPANDING;
122
+ await this.updateComplete;
123
+ await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
124
+ if (this._state === states.PREEXPANDING) {
125
+ this._state = states.EXPANDING;
126
+ const contentHeight = this.#getContentHeight();
127
+ if (contentHeight) this._height = `${contentHeight}px`;
128
+ if (contentHeight === 0) this.#resolveTransition();
135
129
  }
136
130
  } else {
137
- if (!firstUpdate) {
138
- this.dispatchEvent(new CustomEvent(
139
- 'd2l-expand-collapse-content-collapse',
140
- { bubbles: true, detail: { collapseComplete: eventPromise } }
141
- ));
142
- }
143
- if (this._reduceMotion || firstUpdate) {
144
- this._state = states.COLLAPSED;
131
+ this._state = states.PRECOLLAPSING;
132
+ this._height = `${this.#getContentHeight()}px`;
133
+ await this.updateComplete;
134
+ await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
135
+ if (this._state === states.PRECOLLAPSING) {
136
+ this._state = states.COLLAPSING;
145
137
  this._height = '0';
146
- this._eventPromiseResolve();
147
- } else {
148
- this._state = states.PRECOLLAPSING;
149
- const content = this.shadowRoot && this.shadowRoot.querySelector('.d2l-expand-collapse-content-inner');
150
- if (content) this._height = `${content.scrollHeight}px`;
151
- await this.updateComplete;
152
- await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
153
- if (this._state === states.PRECOLLAPSING) {
154
- this._state = states.COLLAPSING;
155
- this._height = '0';
156
- }
157
138
  }
158
139
  }
159
140
  }
160
141
 
161
- _onTransitionEnd() {
162
- if (this._state === states.EXPANDING) {
163
- this._setExpanded();
164
- } else if (this._state === states.COLLAPSING) {
165
- this._state = states.COLLAPSED;
166
- this._eventPromiseResolve();
167
- }
142
+ #getContentHeight() {
143
+ return this.shadowRoot?.querySelector('.d2l-expand-collapse-content-inner')?.scrollHeight ?? 0;
168
144
  }
169
145
 
170
- _setExpanded() {
171
- this._state = states.EXPANDED;
172
- this._height = 'auto';
173
- this._eventPromiseResolve();
146
+ #resolveTransition() {
147
+ this._state = this.expanded ? states.EXPANDED : states.COLLAPSED;
148
+ this._height = this.expanded ? 'auto' : '0';
149
+ this._eventPromiseResolve && this._eventPromiseResolve();
174
150
  }
175
151
  }
176
152
  customElements.define('d2l-expand-collapse-content', ExpandCollapseContent);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.219.9",
3
+ "version": "3.220.0",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",
package/components/demo/demo-theme.js DELETED
@@ -1,7 +0,0 @@
1
- const urlParams = new URLSearchParams(window.location.search);
2
- const theme = urlParams.get('theme');
3
- if (theme) {
4
- document.documentElement.dataset.theme = theme;
5
- } else {
6
- delete document.documentElement.dataset.theme;
7
- }