@brightspace-ui/core 3.226.0 → 3.227.1

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 (7) hide show
  1. package/components/colors/colors.js +99 -120
  2. package/components/demo/demo-page.js +2 -2
  3. package/components/demo/demo-snippet.js +5 -5
  4. package/components/demo/styles.css +1 -1
  5. package/components/inputs/input-checkbox.js +5 -9
  6. package/components/inputs/input-radio.js +5 -9
  7. package/package.json +1 -1
package/components/colors/colors.js CHANGED
@@ -3,128 +3,107 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
3
3
  style.id = 'd2l-colors';
4
4
 
5
5
  const lightPalette = `
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);
6
+ --d2l-theme-background-color-base: #ffffff;
7
+ --d2l-theme-background-color-elevated: var(--d2l-theme-background-color-base);
8
+ --d2l-theme-background-color-floating: var(--d2l-theme-background-color-base);
9
+ --d2l-theme-background-color-interactive-faint-default: var(--d2l-color-regolith);
10
+ --d2l-theme-background-color-interactive-faint-hover: var(--d2l-color-sylvite);
11
+ --d2l-theme-background-color-interactive-highlighted: var(--d2l-theme-brand-color-highlight);
12
+ --d2l-theme-background-color-interactive-primary-default: var(--d2l-theme-brand-color-primary-default);
13
+ --d2l-theme-background-color-interactive-primary-hover: var(--d2l-theme-brand-color-primary-hover);
14
+ --d2l-theme-background-color-interactive-secondary-default: var(--d2l-color-gypsum);
15
+ --d2l-theme-background-color-interactive-secondary-hover: var(--d2l-color-mica);
16
+ --d2l-theme-background-color-interactive-tertiary-default: transparent;
17
+ --d2l-theme-background-color-interactive-tertiary-hover: var(--d2l-theme-background-color-interactive-secondary-default);
18
+ --d2l-theme-background-color-interactive-translucent-default: #00000080;
19
+ --d2l-theme-background-color-interactive-translucent-hover: var(--d2l-theme-brand-color-primary-default);
20
+ --d2l-theme-background-color-sunken: #f6f7f8;
21
+ --d2l-theme-border-color-emphasized: var(--d2l-color-galena);
22
+ --d2l-theme-border-color-focus: var(--d2l-color-celestine);
23
+ --d2l-theme-border-color-standard: var(--d2l-color-mica);
24
+ --d2l-theme-border-color-subtle: var(--d2l-color-gypsum);
25
+ --d2l-theme-brand-color-highlight: var(--d2l-color-celestine-plus-2);
26
+ --d2l-theme-brand-color-primary-default: var(--d2l-color-celestine);
27
+ --d2l-theme-brand-color-primary-hover: var(--d2l-color-celestine-minus-1);
28
+ --d2l-theme-icon-color-faint: var(--d2l-theme-border-color-standard);
29
+ --d2l-theme-icon-color-inverted: #ffffff;
30
+ --d2l-theme-icon-color-standard: var(--d2l-color-tungsten);
31
+ --d2l-theme-shadow-attached-color: #00000008;
32
+ --d2l-theme-shadow-floating-color: #00000026;
33
+ --d2l-theme-status-color-default: var(--d2l-color-celestine);
34
+ --d2l-theme-status-color-error: var(--d2l-color-cinnabar);
35
+ --d2l-theme-status-color-success-text: var(--d2l-color-olivine-minus-1);
36
+ --d2l-theme-status-color-success: var(--d2l-color-olivine);
37
+ --d2l-theme-status-color-warning-text: var(--d2l-color-carnelian-minus-1);
38
+ --d2l-theme-status-color-warning: var(--d2l-color-carnelian);
39
+ --d2l-theme-text-color-interactive-default: var(--d2l-theme-brand-color-primary-default);
40
+ --d2l-theme-text-color-interactive-hover: var(--d2l-theme-brand-color-primary-hover);
41
+ --d2l-theme-text-color-static-faint: var(--d2l-color-galena);
42
+ --d2l-theme-text-color-static-inverted: #ffffff;
43
+ --d2l-theme-text-color-static-standard: var(--d2l-color-ferrite);
44
+ --d2l-theme-text-color-static-subtle: var(--d2l-color-tungsten);
45
+
46
+ --d2l-theme-opacity-disabled-control: 0.5;
47
+ --d2l-theme-opacity-disabled-link: 0.74;
48
+ --d2l-theme-opacity-disabled-linkicon: 0.64;
49
+
50
+ --d2l-theme-shadow-attached: 0 2px 4px 0 rgba(0, 0, 0, 0.03);
51
+ --d2l-theme-shadow-attached-block-start: 0 2px 4px 0 rgba(0, 0, 0, 0.03);
52
+ --d2l-theme-shadow-attached-block-end: 0 -2px 4px 0 rgba(0, 0, 0, 0.03);
53
+ --d2l-theme-shadow-floating: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
54
+ --d2l-theme-shadow-inset: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
55
+
66
56
  `;
67
57
  const darkPalette = `
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);
58
+ --d2l-theme-background-color-base: #161718;
59
+ --d2l-theme-background-color-elevated: var(--d2l-color-ferrite);
60
+ --d2l-theme-background-color-floating: var(--d2l-color-ferrite);
61
+ --d2l-theme-background-color-interactive-faint-default: var(--d2l-color-ferrite);
62
+ --d2l-theme-background-color-interactive-faint-hover: #303335;
63
+ --d2l-theme-background-color-interactive-highlighted: var(--d2l-theme-brand-color-highlight);
64
+ --d2l-theme-background-color-interactive-primary-default: var(--d2l-theme-brand-color-primary-default);
65
+ --d2l-theme-background-color-interactive-primary-hover: var(--d2l-theme-brand-color-primary-hover);
66
+ --d2l-theme-background-color-interactive-secondary-default: #303335;
67
+ --d2l-theme-background-color-interactive-secondary-hover: var(--d2l-color-ferrite);
68
+ --d2l-theme-background-color-interactive-tertiary-default: transparent;
69
+ --d2l-theme-background-color-interactive-tertiary-hover: var(--d2l-theme-background-color-interactive-secondary-default);
70
+ --d2l-theme-background-color-interactive-translucent-default: #00000080;
71
+ --d2l-theme-background-color-interactive-translucent-hover: var(--d2l-theme-brand-color-primary-default);
72
+ --d2l-theme-background-color-sunken: #000000;
73
+ --d2l-theme-border-color-emphasized: var(--d2l-color-galena);
74
+ --d2l-theme-border-color-focus: var(--d2l-color-celestine-plus-1);
75
+ --d2l-theme-border-color-standard: var(--d2l-color-tungsten);
76
+ --d2l-theme-border-color-subtle: #303335;
77
+ --d2l-theme-brand-color-highlight: #161718;
78
+ --d2l-theme-brand-color-primary-default: var(--d2l-color-celestine-plus-1);
79
+ --d2l-theme-brand-color-primary-hover: var(--d2l-color-celestine);
80
+ --d2l-theme-icon-color-faint: var(--d2l-theme-border-color-standard);
81
+ --d2l-theme-icon-color-inverted: #ffffff;
82
+ --d2l-theme-icon-color-standard: var(--d2l-color-corundum);
83
+ --d2l-theme-shadow-attached-color: #000000d9;
84
+ --d2l-theme-shadow-floating-color: #000000d9;
85
+ --d2l-theme-status-color-default: var(--d2l-theme-brand-color-primary-default);
86
+ --d2l-theme-status-color-error: var(--d2l-color-cinnabar-plus-1);
87
+ --d2l-theme-status-color-success-text: #ffffff;
88
+ --d2l-theme-status-color-success: var(--d2l-color-olivine);
89
+ --d2l-theme-status-color-warning-text: var(--d2l-color-carnelian);
90
+ --d2l-theme-status-color-warning: var(--d2l-color-carnelian);
91
+ --d2l-theme-text-color-interactive-default: var(--d2l-theme-brand-color-primary-default);
92
+ --d2l-theme-text-color-interactive-hover: var(--d2l-theme-brand-color-primary-hover);
93
+ --d2l-theme-text-color-static-faint: var(--d2l-color-galena);
94
+ --d2l-theme-text-color-static-inverted: #161718;
95
+ --d2l-theme-text-color-static-standard: var(--d2l-color-mica);
96
+ --d2l-theme-text-color-static-subtle: var(--d2l-color-chromite);
97
+
98
+ --d2l-theme-opacity-disabled-control: 0.5;
99
+ --d2l-theme-opacity-disabled-link: 0.74;
100
+ --d2l-theme-opacity-disabled-linkicon: 0.64;
101
+
102
+ --d2l-theme-shadow-attached: 0 2px 4px 0 rgba(0, 0, 0, 0.85);
103
+ --d2l-theme-shadow-attached-block-start: 0 2px 4px 0 rgba(0, 0, 0, 0.85);
104
+ --d2l-theme-shadow-attached-block-end: 0 -2px 4px 0 rgba(0, 0, 0, 0.85);
105
+ --d2l-theme-shadow-floating: 0 2px 12px 0 rgba(0, 0, 0, 0.85);
106
+ --d2l-theme-shadow-inset: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
128
107
  `;
129
108
 
130
109
  style.textContent = `
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-sem-background-color-sunken);
34
+ background-color: var(--d2l-theme-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-sem-text-color-static-standard);
49
+ color: var(--d2l-theme-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-sem-background-color-base);
28
- border: 1px solid var(--d2l-sem-border-color-standard);
27
+ background-color: var(--d2l-theme-background-color-base);
28
+ border: 1px solid var(--d2l-theme-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-sem-background-color-base);
44
+ background-color: var(--d2l-theme-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-sem-border-color-standard);
70
+ border-inline-start: 1px solid var(--d2l-theme-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-sem-background-color-base);
79
+ background-color: var(--d2l-theme-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-sem-background-color-base);
2
+ background-color: var(--d2l-theme-background-color-base);
3
3
  font-size: 20px;
4
4
  }
5
5
  body {
package/components/inputs/input-checkbox.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import '../colors/colors.js';
2
+ import '../expand-collapse/expand-collapse-content.js';
2
3
  import '../tooltip/tooltip.js';
3
4
  import { css, html, LitElement, nothing } from 'lit';
4
5
  import { classMap } from 'lit/directives/class-map.js';
@@ -240,12 +241,8 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
240
241
  vertical-align: top;
241
242
  }
242
243
  .d2l-input-checkbox-supporting {
243
- display: none;
244
244
  margin-block-start: 0.6rem;
245
245
  }
246
- .d2l-input-checkbox-supporting-visible {
247
- display: block;
248
- }
249
246
  `
250
247
  ];
251
248
  }
@@ -271,10 +268,7 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
271
268
 
272
269
  render() {
273
270
  const tabindex = this.notTabbable ? -1 : undefined;
274
- const supportingClasses = {
275
- 'd2l-input-checkbox-supporting': true,
276
- 'd2l-input-checkbox-supporting-visible': this._hasSupporting && (this.checked || !this.supportingHiddenWhenUnchecked)
277
- };
271
+ const supportingContentVisible = this._hasSupporting && (this.checked || !this.supportingHiddenWhenUnchecked);
278
272
  const textClasses = {
279
273
  'd2l-input-checkbox-text': true,
280
274
  'd2l-skeletize': true,
@@ -311,7 +305,9 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
311
305
  ${this._renderInlineHelp(this.#inlineHelpId)}
312
306
  ${offscreenContainer}
313
307
  ${disabledTooltip}
314
- <div class="${classMap(supportingClasses)}" @change="${this.#handleSupportingChange}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
308
+ <d2l-expand-collapse-content ?expanded="${supportingContentVisible}">
309
+ <div class="d2l-input-checkbox-supporting" @change="${this.#handleSupportingChange}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
310
+ </d2l-expand-collapse-content>
315
311
  `;
316
312
  }
317
313
 
package/components/inputs/input-radio.js CHANGED
@@ -1,3 +1,4 @@
1
+ import '../expand-collapse/expand-collapse-content.js';
1
2
  import '../tooltip/tooltip.js';
2
3
  import { css, html, LitElement, nothing } from 'lit';
3
4
  import { classMap } from 'lit/directives/class-map.js';
@@ -80,12 +81,8 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
80
81
  margin-inline-start: 1.7rem;
81
82
  }
82
83
  .d2l-input-radio-supporting {
83
- display: none;
84
84
  margin-block-start: 0.6rem;
85
85
  }
86
- .d2l-input-radio-supporting-visible {
87
- display: block;
88
- }
89
86
  `];
90
87
  }
91
88
 
@@ -129,6 +126,7 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
129
126
 
130
127
  render() {
131
128
  const allowFocus = !this.focusDisabled && this._focusable;
129
+ const supportingContentVisible = this._hasSupporting && (!this.supportingHiddenWhenUnchecked || this._checked);
132
130
  const labelStyles = {
133
131
  alignItems: this._horizontal ? 'flex-start' : undefined
134
132
  };
@@ -143,10 +141,6 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
143
141
  'd2l-hovering': this._isHovered && !this.focusDisabled,
144
142
  'd2l-skeletize': true
145
143
  };
146
- const supportingClasses = {
147
- 'd2l-input-radio-supporting': true,
148
- 'd2l-input-radio-supporting-visible': this._hasSupporting && (!this.supportingHiddenWhenUnchecked || this._checked),
149
- };
150
144
  const description = this.description ? html`<div id="${this.#descriptionId}" hidden>${this.description}</div>` : nothing;
151
145
  const ariaDescribedByIds = `${this.description ? this.#descriptionId : ''} ${this._hasInlineHelp ? this.#inlineHelpId : ''}`.trim();
152
146
  const disabledTooltip = this.disabled && this.disabledTooltip ?
@@ -169,7 +163,9 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
169
163
  ${this._renderInlineHelp(this.#inlineHelpId)}
170
164
  ${description}
171
165
  ${disabledTooltip}
172
- <div class="${classMap(supportingClasses)}" @change="${this.#handleSupportingChange}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
166
+ <d2l-expand-collapse-content ?expanded="${supportingContentVisible}">
167
+ <div class="d2l-input-radio-supporting" @change="${this.#handleSupportingChange}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
168
+ </d2l-expand-collapse-content>
173
169
  `;
174
170
  }
175
171
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.226.0",
3
+ "version": "3.227.1",
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",