@brightspace-ui/core 3.190.0 → 3.191.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.
@@ -6,6 +6,7 @@
6
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
7
  <script type="module">
8
8
  import '../../demo/demo-page.js';
9
+ import '../../button/button-icon.js';
9
10
  import '../../button/button-subtle.js';
10
11
  import '../../button/button-toggle.js';
11
12
  import '../../icons/icon.js';
@@ -127,21 +128,60 @@
127
128
  </d2l-list-item-content>
128
129
  </d2l-list-item>
129
130
  <d2l-list-item label="item 5">
130
- <img slot="illustration" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAKsGlDQ1BJQ0MgUHJvZmlsZQAASImVlwdUU9kWhs+96Q0CgQhICTUUQYpAACmhh96bqIQkQCgxBoKKDZHBERwLIiKgDOhQRMFRKTIWxIJtUFSwOyCioI6DBRso7wKL4Mxb7731dtbO+dZ/991nn7POydoBgMLgisWpMBWANFGGJMTLlREVHcPADQMygAARkACWy0sXs4OC/ABiM+Pf7UMvEovYLdPJXP/+/L+aAl+QzgMACkI4np/OS0P4OOLjPLEkAwDUEUTXXZEhnuTbCCtJkAIRHprkxGken+T4KUZTp2LCQtwQ1gMAT+ZyJYkAkM0RnZHJS0TykCfnMhfxhSKEsxF2Sktbxke4HWFDJEaM8GR+Vvx3eRL/ljNelpPLTZTx9FqmDO8uTBenclf9n9vxvy0tVTozBxNxcpLEOwQZVZA9e5qyzFfGoviAwBkW8qfipzhJ6h0+w7x0t5gZTk8N5cwwn+vuK8uTGuA3wwlCT1mMMIMTNsOCdI/QGZYsC5HNmyBxY88wVzJbgzQlXKYnCTiy/FlJYZEznCmMCJDVlhLqOxvjJtMl0hDZWgQiL9fZeT1l+5CW/t3ahRzZuxlJYd6yfeDO1i8QsWdzpkfJauML3D1mY8Jl8eIMV9lc4tQgWbwg1Uump2eGyt7NQA7n7LtBsj1M5voEzTBwBx7AD/kwQDiwBLaIW4Fg4JEhWJkxuRi3ZeJVEmFiUgaDjdw4AYMj4pnNY1iaW1oDMHl/p4/Hu7tT9xKi42e13BwAFk4gcH1W80f86E7kKK2e1fSRuqjI/bjwlCeVZE5r6MkvDPKrIA+UgCrQBLrAEJgitdkAB+CCVOwDAkEYiAZLAA8kgTQgASvAGrAB5IECsB3sAqWgAuwHteAwOApawElwFlwEV8EN0AMegD4wCF6CEfABjEEQhIMoEA1ShbQgfcgEsoRYkBPkAflBIVA0FAclQiJICq2BNkIFUCFUClVCddCv0AnoLHQZ6obuQf3QMPQW+gKjYDKsBGvABvB8mAWzYV84DF4MJ8LL4Sw4F94Kl8BV8CG4GT4LX4V74D74JTyKAigSio7SRpmiWCg3VCAqBpWAkqDWofJRxagqVAOqDdWJuoXqQ71CfUZj0TQ0A22KdkB7o8PRPPRy9Dr0FnQpuhbdjD6PvoXuR4+gv2EoGHWMCcYew8FEYRIxKzB5mGJMNaYJcwHTgxnEfMBisXQsE2uL9cZGY5Oxq7FbsHuxjdh2bDd2ADuKw+FUcSY4R1wgjovLwOXh9uAO4c7gbuIGcZ/wJLwW3hLviY/Bi/A5+GL8Qfxp/E38c/wYgUrQJ9gTAgl8wirCNsIBQhvhOmGQMEZUIDKJjsQwYjJxA7GE2EC8QHxIfEcikXRIdqRgkpCUTSohHSFdIvWTPpMVycZkN3IsWUreSq4ht5Pvkd9RKBQDigslhpJB2Uqpo5yjPKZ8kqPJmclx5Phy6+XK5Jrlbsq9lifI68uz5ZfIZ8kXyx+Tvy7/ikqgGlDdqFzqOmoZ9QT1DnVUgaZgoRCokKawReGgwmWFIUWcooGihyJfMVdxv+I5xQEaiqZLc6PxaBtpB2gXaINKWCWmEkcpWalA6bBSl9KIsqLyAuUI5ZXKZcqnlPvoKLoBnUNPpW+jH6X30r/M0ZjDniOYs3lOw5ybcz6qzFVxURGo5Ks0qvSofFFlqHqopqjuUG1RfaSGVjNWC1ZbobZP7YLaq7lKcx3m8ubmzz069746rG6sHqK+Wn2/+jX1UQ1NDS8NscYejXMarzTpmi6ayZpFmqc1h7VoWk5aQq0irTNaLxjKDDYjlVHCOM8Y0VbX9taWaldqd2mP6TB1wnVydBp1HukSdVm6CbpFuh26I3paev56a/Tq9e7rE/RZ+kn6u/U79T8aMA0iDTYZtBgMMVWYHGYWs5750JBi6Gy43LDK8LYR1ohllGK01+iGMWxsbZxkXGZ83QQ2sTERmuw16Z6HmWc3TzSvat4dU7Ip2zTTtN6034xu5meWY9Zi9nq+3vyY+Tvmd87/Zm5tnmp+wPyBhaKFj0WORZvFW0tjS55lmeVtK4qVp9V6q1arNwtMFggW7Ftw15pm7W+9ybrD+quNrY3EpsFm2FbPNs623PYOS4kVxNrCumSHsXO1W2930u6zvY19hv1R+78cTB1SHA46DC1kLhQsPLBwwFHHketY6djnxHCKc/rZqc9Z25nrXOX8xEXXhe9S7fKcbcROZh9iv3Y1d5W4Nrl+dLN3W+vW7o5y93LPd+/yUPQI9yj1eOyp45noWe854mXttdqr3Rvj7eu9w/sOR4PD49RxRnxsfdb6nPcl+4b6lvo+8TP2k/i1+cP+Pv47/R8G6AeIAloCQSAncGfgoyBm0PKg34KxwUHBZcHPQixC1oR0htJCl4YeDP0Q5hq2LexBuGG4NLwjQj4iNqIu4mOke2RhZF/U/Ki1UVej1aKF0a0xuJiImOqY0UUei3YtGoy1js2L7V3MXLxy8eUlaktSl5xaKr+Uu/RYHCYuMu5g3Dg3kFvFHY3nxJfHj/DceLt5L/ku/CL+sMBRUCh4nuCYUJgwlOiYuDNxOMk5qTjpldBNWCp8k+ydXJH8MSUwpSZlIjUytTENnxaXdkKkKEoRnV+muWzlsm6xiThP3Lfcfvmu5SMSX0l1OpS+OL01QwlplK5JDaU/SPsznTLLMj+tiFhxbKXCStHKa6uMV21e9TzLM+uX1ejVvNUda7TXbFjTv5a9tnIdtC5+Xcd63fW56wezvbJrNxA3pGz4Pcc8pzDn/cbIjW25GrnZuQM/eP1QnyeXJ8m7s8lhU8WP6B+FP3Ztttq8Z/O3fH7+lQLzguKC8S28LVd+svip5KeJrQlbu7bZbNu3HbtdtL13h/OO2kKFwqzCgZ3+O5uLGEX5Re93Ld11uXhBccVu4m7p7r4Sv5LWPXp7tu8ZL00q7SlzLWssVy/fXP5xL3/vzX0u+xoqNCoKKr78LPz5bqVXZXOVQVXxfuz+zP3PDkQc6PyF9UtdtVp1QfXXGlFNX21I7fk627q6g+oHt9XD9dL64UOxh24cdj/c2mDaUNlIbyw4Ao5Ij7z4Ne7X3qO+RzuOsY41HNc/Xt5Ea8pvhppXNY+0JLX0tUa3dp/wOdHR5tDW9JvZbzUntU+WnVI+te008XTu6YkzWWdG28Xtr84mnh3oWNrx4FzUudvng893XfC9cOmi58VznezOM5ccL528bH/5xBXWlZarNlebr1lfa/rd+vemLpuu5uu211tv2N1o617Yffqm882zt9xvXbzNuX21J6Cnuze89+6d2Dt9d/l3h+6l3ntzP/P+2IPsh5iH+Y+oj4ofqz+u+sPoj8Y+m75T/e79156EPnkwwBt4+TT96fhg7jPKs+LnWs/rhiyHTg57Dt94sejF4Evxy7FXeX8q/Fn+2vD18b9c/ro2EjUy+EbyZuLtlneq72reL3jfMRo0+vhD2oexj/mfVD/VfmZ97vwS+eX52Ipx3HjJV6Ovbd98vz2cSJuYEHMl3KlWAIU4nJAAwNsaACjRANBuAEBcNN1fTxk0/Z9gisB/4ukefMpsADjcDkCQCwDu7dOsj8jyLtNamAuAraxkPtMLT/Xtk0Y9BIBrsgfL0+8P8CIb/MOme/rv6v7nCGRZ/zb+C0JwC447Z4QQAAAAlmVYSWZNTQAqAAAACAAFARIAAwAAAAEAAQAAARoABQAAAAEAAABKARsABQAAAAEAAABSASgAAwAAAAEAAgAAh2kABAAAAAEAAABaAAAAAAAAAJAAAAABAAAAkAAAAAEAA5KGAAcAAAASAAAAhKACAAQAAAABAAAAyKADAAQAAAABAAAAyAAAAABBU0NJSQAAAFNjcmVlbnNob3RZIvZ3AAAACXBIWXMAABYlAAAWJQFJUiTwAAAC12lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+ODAwPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6VXNlckNvbW1lbnQ+U2NyZWVuc2hvdDwvZXhpZjpVc2VyQ29tbWVudD4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjgwMDwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjE0NDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+MTQ0PC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KE+0EygAABEFJREFUeAHt07ENwCAQBEGgJ5dFg27OSI7RVjCEfDa6nc9+v+ERIHAVWNdfnwQI/AICMQQCISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEicADECgPrw9IKqwAAAABJRU5ErkJggg==" alt="" />
131
+ <div slot="illustration" style="background-color: var(--d2l-color-olivine); color: white;">I'm a &lt;div&gt;</div>
131
132
  <d2l-list-item-content>
132
133
  <div>Identify categories of physical activities</div>
133
134
  <div slot="secondary">Secondary Information</div>
134
135
  <div slot="supporting-info">Specific Expectation A1.2</div>
135
136
  </d2l-list-item-content>
136
137
  </d2l-list-item>
137
- <d2l-list-item label="item 6">
138
- <div slot="illustration" style="background-color: var(--d2l-color-olivine); color: white;">I'm a &lt;div&gt;</div>
138
+ </d2l-list>
139
+ <script data-demo-hide>
140
+ (demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
141
+ </script>
142
+ </template>
143
+ </d2l-demo-snippet>
144
+
145
+ <h2>Selectable</h2>
146
+
147
+ <d2l-demo-snippet>
148
+ <template>
149
+ <d2l-button-toggle pressed>
150
+ <d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
151
+ <d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
152
+ </d2l-button-toggle>
153
+ <d2l-list layout="tiles">
154
+ <d2l-list-item label="item 1" key="1" selectable tile-header>
155
+ <img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
139
156
  <d2l-list-item-content>
140
157
  <div>Identify categories of physical activities</div>
141
158
  <div slot="secondary">Secondary Information</div>
142
159
  <div slot="supporting-info">Specific Expectation A1.2</div>
143
160
  </d2l-list-item-content>
144
161
  </d2l-list-item>
162
+ <d2l-list-item label="item 2" key="2" selectable>
163
+ <img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
164
+ <d2l-list-item-content>
165
+ <div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
166
+ <div slot="secondary">Secondary Information</div>
167
+ <div slot="supporting-info">Specific Expectation B2.1</div>
168
+ </d2l-list-item-content>
169
+ </d2l-list-item>
170
+ <d2l-list-item label="item 3" key="3" selectable>
171
+ <img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
172
+ <d2l-list-item-content>
173
+ <div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
174
+ <div slot="secondary">Secondary Information</div>
175
+ <div slot="supporting-info">Specific Expectation B2.2</div>
176
+ </d2l-list-item-content>
177
+ </d2l-list-item>
178
+ <d2l-list-item label="item 4" key="4" selectable tile-header>
179
+ <d2l-list-item-content>
180
+ <div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
181
+ <div slot="secondary">Secondary Information</div>
182
+ <div slot="supporting-info">Specific Expectation B2.2</div>
183
+ </d2l-list-item-content>
184
+ </d2l-list-item>
145
185
  </d2l-list>
146
186
  <script data-demo-hide>
147
187
  (demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
@@ -149,7 +189,7 @@
149
189
  </template>
150
190
  </d2l-demo-snippet>
151
191
 
152
- <h2>Selectable</h2>
192
+ <h2>Actions</h2>
153
193
 
154
194
  <d2l-demo-snippet>
155
195
  <template>
@@ -158,29 +198,49 @@
158
198
  <d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
159
199
  </d2l-button-toggle>
160
200
  <d2l-list layout="tiles">
161
- <d2l-list-item label="item 1" key="1" selectable>
201
+ <d2l-list-item label="item 1" key="1" tile-header>
162
202
  <img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
163
203
  <d2l-list-item-content>
164
204
  <div>Identify categories of physical activities</div>
165
205
  <div slot="secondary">Secondary Information</div>
166
206
  <div slot="supporting-info">Specific Expectation A1.2</div>
167
207
  </d2l-list-item-content>
208
+ <div slot="actions">
209
+ <d2l-button-icon text="More" icon="tier1:more"></d2l-button-icon>
210
+ </div>
168
211
  </d2l-list-item>
169
- <d2l-list-item label="item 2" key="2" selectable>
212
+ <d2l-list-item label="item 2" key="2">
170
213
  <img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
171
214
  <d2l-list-item-content>
172
215
  <div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
173
216
  <div slot="secondary">Secondary Information</div>
174
217
  <div slot="supporting-info">Specific Expectation B2.1</div>
175
218
  </d2l-list-item-content>
219
+ <div slot="actions">
220
+ <d2l-button-icon text="More" icon="tier1:more" translucent></d2l-button-icon>
221
+ </div>
176
222
  </d2l-list-item>
177
- <d2l-list-item label="item 3" key="3" selectable>
223
+ <d2l-list-item label="item 3" key="3">
178
224
  <img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
179
225
  <d2l-list-item-content>
180
226
  <div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
181
227
  <div slot="secondary">Secondary Information</div>
182
228
  <div slot="supporting-info">Specific Expectation B2.2</div>
183
229
  </d2l-list-item-content>
230
+ <div slot="actions">
231
+ <d2l-button-icon text="More" icon="tier1:more" translucent visible-on-ancestor></d2l-button-icon>
232
+ </div>
233
+ </d2l-list-item>
234
+ <d2l-list-item label="item 4" key="4" tile-header selectable>
235
+ <d2l-list-item-content>
236
+ <div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
237
+ <div slot="secondary">Secondary Information</div>
238
+ <div slot="supporting-info">Specific Expectation B2.2</div>
239
+ </d2l-list-item-content>
240
+ <div slot="actions">
241
+ <d2l-button-icon text="Pin" icon="tier1:pin-filled"></d2l-button-icon>
242
+ <d2l-button-icon text="More" icon="tier1:more"></d2l-button-icon>
243
+ </div>
184
244
  </d2l-list-item>
185
245
  </d2l-list>
186
246
  <script data-demo-hide>
@@ -220,19 +220,25 @@ class ListItemGenericLayout extends LitElement {
220
220
  :host([layout="tile"]) {
221
221
  grid-template-columns:
222
222
  [start control-start] minmax(0, min-content)
223
- [control-end] minmax(0, auto)
224
- [end];
223
+ [control-end actions-start] minmax(0, auto)
224
+ [actions-end end];
225
225
  grid-template-rows:
226
226
  [start header-start] minmax(0, min-content)
227
227
  [header-end content-start] auto
228
228
  [content-end end];
229
229
  height: 100%;
230
230
  }
231
+
232
+ :host([layout="tile"]) ::slotted([slot="header"]) {
233
+ grid-column: start / end;
234
+ grid-row: header-start / header-end;
235
+ }
236
+
231
237
  :host([layout="tile"]) ::slotted([slot="content"]),
232
238
  :host([layout="tile"]) ::slotted([slot="content-action"]),
233
239
  :host([layout="tile"]) ::slotted([slot="control-action"]) {
234
240
  grid-column: start / end;
235
- grid-row: start / end;
241
+ grid-row: content-start / end;
236
242
  }
237
243
  :host([layout="tile"]) ::slotted([slot="outside-control-container"]) {
238
244
  grid-column: start / end;
@@ -240,11 +246,17 @@ class ListItemGenericLayout extends LitElement {
240
246
  }
241
247
  :host([layout="tile"]) ::slotted([slot="control"]) {
242
248
  grid-column: control-start / control-end;
243
- grid-row: start;
249
+ grid-row: start / start;
244
250
  pointer-events: all;
245
251
  width: unset;
246
252
  }
247
253
 
254
+ :host([layout="tile"]) ::slotted([slot="actions"]) {
255
+ grid-column: actions-start / actions-end;
256
+ grid-row: start / start;
257
+ }
258
+
259
+ :host(:not([layout="tile"])) slot[name="header"],
248
260
  :host([layout="tile"]) slot[name="add-top"],
249
261
  :host([layout="tile"]) slot[name="control-container"],
250
262
  :host([layout="tile"]) slot[name="before-content"],
@@ -252,7 +264,6 @@ class ListItemGenericLayout extends LitElement {
252
264
  :host([layout="tile"]) slot[name="outside-control-action"],
253
265
  :host([layout="tile"]) slot[name="color-indicator"],
254
266
  :host([layout="tile"]) slot[name="expand-collapse"],
255
- :host([layout="tile"]) slot[name="actions"],
256
267
  :host([layout="tile"]) slot[name="drop-target"],
257
268
  :host([layout="tile"]) slot[name="nested"],
258
269
  :host([layout="tile"]) slot[name="add"] {
@@ -293,6 +304,7 @@ class ListItemGenericLayout extends LitElement {
293
304
 
294
305
  <slot name="control-container"></slot>
295
306
  <slot name="outside-control-container"></slot>
307
+ <slot name="header"></slot>
296
308
  <slot name="before-content"></slot>
297
309
 
298
310
  <slot name="content-action" class="d2l-cell" data-cell-num="6"></slot>
@@ -102,6 +102,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
102
102
  * @type {'normal'|'none'}
103
103
  */
104
104
  paddingType: { type: String, attribute: 'padding-type' },
105
+ /**
106
+ * Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.
107
+ * @type {boolean}
108
+ */
109
+ tileHeader: { type: Boolean, reflect: true, attribute: 'tile-header' },
105
110
  _addButtonText: { state: true },
106
111
  _displayKeyboardTooltip: { type: Boolean },
107
112
  _hasColorSlot: { type: Boolean, reflect: true, attribute: '_has-color-slot' },
@@ -459,6 +464,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
459
464
  max-height: unset;
460
465
  max-width: calc(100% + 1.1rem);
461
466
  }
467
+ :host([layout="tile"][tile-header]) [slot="content"] ::slotted([slot="illustration"]),
468
+ :host([layout="tile"][tile-header]) .d2l-list-item-illustration > * {
469
+ border-radius: 0;
470
+ margin-block: -0.6rem 0.6rem;
471
+ }
462
472
 
463
473
  :host([layout="tile"]) [slot="content"] ::slotted(d2l-icon[slot="illustration"]),
464
474
  :host([layout="tile"]) .d2l-list-item-illustration > d2l-icon[slot="illustration"] {
@@ -513,14 +523,16 @@ export const ListItemMixin = superclass => class extends composeMixins(
513
523
  }
514
524
 
515
525
  :host([layout="tile"]) d2l-selection-input {
526
+ margin: 0;
527
+ }
528
+ :host([layout="tile"]:not([tile-header])) d2l-selection-input {
516
529
  --d2l-input-checkbox-border-color-hover-focus: var(--d2l-color-celestine-minus-1);
517
530
  --d2l-input-radio-border-color-hover-focus: var(--d2l-color-celestine-minus-1);
518
531
  border: 2px solid transparent;
519
532
  border-radius: 8px;
520
- margin: 0;
521
533
  padding: 3px;
522
534
  }
523
- :host([layout="tile"][_focusing]) d2l-selection-input {
535
+ :host([layout="tile"][_focusing]:not([tile-header])) d2l-selection-input {
524
536
  border: 2px solid white;
525
537
  }
526
538
  :host([layout="tile"]) [slot="control"] {
@@ -529,14 +541,52 @@ export const ListItemMixin = superclass => class extends composeMixins(
529
541
  box-sizing: border-box;
530
542
  margin: 0.5rem;
531
543
  outline: 2px solid transparent;
544
+ position: absolute;
532
545
  }
533
- :host([layout="tile"][_focusing]) [slot="control"] {
546
+ :host([layout="tile"][_focusing]:not([tile-header])) [slot="control"] {
534
547
  background-color: var(--d2l-color-celestine);
535
548
  outline-color: var(--d2l-color-celestine-minus-1);
536
549
  }
537
550
  :host([layout="tile"][skeleton]) [slot="control"] {
538
551
  background-color: transparent;
539
552
  }
553
+ :host([layout="tile"][tile-header]) [slot="control"] {
554
+ background-color: transparent;
555
+ display: inline-flex;
556
+ margin: 0.4rem 0.6rem;
557
+ outline: none;
558
+ position: static;
559
+ }
560
+
561
+ :host([layout="tile"]) [slot="actions"] {
562
+ --d2l-button-icon-min-height: 1.5rem;
563
+ --d2l-button-icon-min-width: 1.5rem;
564
+ --d2l-button-icon-border-radius: 4px;
565
+ margin-block: 0.6rem;
566
+ margin-inline-end: 0.6rem;
567
+ padding: 0;
568
+ position: absolute;
569
+ }
570
+ :host([layout="tile"][tile-header]) [slot="actions"] {
571
+ --d2l-button-icon-background-color-hover: var(--d2l-color-mica);
572
+ margin: 0.25rem 0.6rem;
573
+ position: static;
574
+ }
575
+
576
+ :host([layout="tile"][tile-header]) [slot="header"] {
577
+ background-color: var(--d2l-color-gypsum);
578
+ border-end-end-radius: 0;
579
+ border-end-start-radius: 0;
580
+ border-start-end-radius: 5px;
581
+ border-start-start-radius: 5px;
582
+ margin-block-start: 1px;
583
+ margin-inline: 1px;
584
+ }
585
+
586
+ :host([layout="tile"]) .d2l-list-item-content-extend-separators ::slotted([slot="actions"]),
587
+ :host([layout="tile"]) .d2l-list-item-content-extend-separators .d2l-list-item-actions > * {
588
+ margin-inline: 0;
589
+ }
540
590
 
541
591
  `];
542
592
 
@@ -547,8 +597,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
547
597
  constructor() {
548
598
  super();
549
599
  this.first = false;
600
+ this.isVisibleOnAncestorTarget = true;
550
601
  this.noPrimaryAction = false;
551
602
  this.paddingType = 'normal';
603
+ this.tileHeader = false;
552
604
  this._addButtonTopId = getUniqueId();
553
605
  this._contentId = getUniqueId();
554
606
  this._displayKeyboardTooltip = false;
@@ -853,6 +905,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
853
905
  </d2l-button-add>
854
906
  </div>
855
907
  ` : nothing}
908
+ <div slot="header"></div>
856
909
  <div slot="outside-control-container" class="${classMap(outsideClasses)}"></div>
857
910
  <div slot="before-content"></div>
858
911
  ${this._renderDropTarget()}
@@ -8941,6 +8941,12 @@
8941
8941
  "type": "'normal'|'none'",
8942
8942
  "default": "\"normal\""
8943
8943
  },
8944
+ {
8945
+ "name": "tile-header",
8946
+ "description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
8947
+ "type": "boolean",
8948
+ "default": "false"
8949
+ },
8944
8950
  {
8945
8951
  "name": "selection-disabled-tooltip",
8946
8952
  "description": "**Selection:** Tooltip text when selection is disabled",
@@ -9046,6 +9052,11 @@
9046
9052
  "type": "boolean",
9047
9053
  "default": "false"
9048
9054
  },
9055
+ {
9056
+ "name": "isVisibleOnAncestorTarget",
9057
+ "type": "boolean",
9058
+ "default": "true"
9059
+ },
9049
9060
  {
9050
9061
  "name": "noPrimaryAction",
9051
9062
  "attribute": "no-primary-action",
@@ -9060,6 +9071,13 @@
9060
9071
  "type": "'normal'|'none'",
9061
9072
  "default": "\"normal\""
9062
9073
  },
9074
+ {
9075
+ "name": "tileHeader",
9076
+ "attribute": "tile-header",
9077
+ "description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
9078
+ "type": "boolean",
9079
+ "default": "false"
9080
+ },
9063
9081
  {
9064
9082
  "name": "selectionDisabledTooltip",
9065
9083
  "attribute": "selection-disabled-tooltip",
@@ -9313,6 +9331,12 @@
9313
9331
  "type": "'normal'|'none'",
9314
9332
  "default": "\"normal\""
9315
9333
  },
9334
+ {
9335
+ "name": "tile-header",
9336
+ "description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
9337
+ "type": "boolean",
9338
+ "default": "false"
9339
+ },
9316
9340
  {
9317
9341
  "name": "selection-disabled-tooltip",
9318
9342
  "description": "**Selection:** Tooltip text when selection is disabled",
@@ -9425,6 +9449,11 @@
9425
9449
  "type": "boolean",
9426
9450
  "default": "false"
9427
9451
  },
9452
+ {
9453
+ "name": "isVisibleOnAncestorTarget",
9454
+ "type": "boolean",
9455
+ "default": "true"
9456
+ },
9428
9457
  {
9429
9458
  "name": "noPrimaryAction",
9430
9459
  "attribute": "no-primary-action",
@@ -9439,6 +9468,13 @@
9439
9468
  "type": "'normal'|'none'",
9440
9469
  "default": "\"normal\""
9441
9470
  },
9471
+ {
9472
+ "name": "tileHeader",
9473
+ "attribute": "tile-header",
9474
+ "description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
9475
+ "type": "boolean",
9476
+ "default": "false"
9477
+ },
9442
9478
  {
9443
9479
  "name": "selectionDisabledTooltip",
9444
9480
  "attribute": "selection-disabled-tooltip",
@@ -9822,6 +9858,12 @@
9822
9858
  "type": "'normal'|'none'",
9823
9859
  "default": "\"normal\""
9824
9860
  },
9861
+ {
9862
+ "name": "tile-header",
9863
+ "description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
9864
+ "type": "boolean",
9865
+ "default": "false"
9866
+ },
9825
9867
  {
9826
9868
  "name": "selection-disabled-tooltip",
9827
9869
  "description": "**Selection:** Tooltip text when selection is disabled",
@@ -9946,6 +9988,11 @@
9946
9988
  "type": "boolean",
9947
9989
  "default": "false"
9948
9990
  },
9991
+ {
9992
+ "name": "isVisibleOnAncestorTarget",
9993
+ "type": "boolean",
9994
+ "default": "true"
9995
+ },
9949
9996
  {
9950
9997
  "name": "noPrimaryAction",
9951
9998
  "attribute": "no-primary-action",
@@ -9960,6 +10007,13 @@
9960
10007
  "type": "'normal'|'none'",
9961
10008
  "default": "\"normal\""
9962
10009
  },
10010
+ {
10011
+ "name": "tileHeader",
10012
+ "attribute": "tile-header",
10013
+ "description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
10014
+ "type": "boolean",
10015
+ "default": "false"
10016
+ },
9963
10017
  {
9964
10018
  "name": "selectionDisabledTooltip",
9965
10019
  "attribute": "selection-disabled-tooltip",
@@ -10147,6 +10201,12 @@
10147
10201
  "type": "'normal'|'none'",
10148
10202
  "default": "\"normal\""
10149
10203
  },
10204
+ {
10205
+ "name": "tile-header",
10206
+ "description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
10207
+ "type": "boolean",
10208
+ "default": "false"
10209
+ },
10150
10210
  {
10151
10211
  "name": "selection-disabled-tooltip",
10152
10212
  "description": "**Selection:** Tooltip text when selection is disabled",
@@ -10264,6 +10324,11 @@
10264
10324
  "type": "boolean",
10265
10325
  "default": "false"
10266
10326
  },
10327
+ {
10328
+ "name": "isVisibleOnAncestorTarget",
10329
+ "type": "boolean",
10330
+ "default": "true"
10331
+ },
10267
10332
  {
10268
10333
  "name": "noPrimaryAction",
10269
10334
  "attribute": "no-primary-action",
@@ -10278,6 +10343,13 @@
10278
10343
  "type": "'normal'|'none'",
10279
10344
  "default": "\"normal\""
10280
10345
  },
10346
+ {
10347
+ "name": "tileHeader",
10348
+ "attribute": "tile-header",
10349
+ "description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
10350
+ "type": "boolean",
10351
+ "default": "false"
10352
+ },
10281
10353
  {
10282
10354
  "name": "selectionDisabledTooltip",
10283
10355
  "attribute": "selection-disabled-tooltip",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.190.0",
3
+ "version": "3.191.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",