@brightspace-ui/core 2.85.4 → 2.85.6

package/components/demo/demo-snippet.js

@@ -42,8 +42,9 @@ class DemoSnippet extends LitElement {
 			}
 			.d2l-demo-snippet-demo-wrapper.fullscreen {
 				background-color: white;
-				height: fit-content;
+				height: 100vh;
 				inset: 0;
+				overflow: auto;
 				position: absolute;
 				z-index: 2;
 			}

package/components/list/README.md

@@ -175,7 +175,7 @@ If a `d2l-list-item` is selectable then it should have a `label` attribute that
 </script>
 
 <d2l-list>
-  <d2l-list-controls slot="controls">
+  <d2l-list-controls slot="controls" no-sticky>
     <d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
   </d2l-list-controls>
   <d2l-list-item selectable key="eth" label="Earth Sciences">
@@ -329,7 +329,7 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
 
 The `d2l-list-controls` component can be placed in the `d2l-list`'s `controls` slot to provide a select-all checkbox, summary, a slot for `d2l-selection-action`s, and overflow-group behaviour.
 
-<!-- docs: demo live name:d2l-list-controls display:block autoSize:false size:medium -->
+<!-- docs: demo live name:d2l-list-controls display:block autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
@@ -338,6 +338,14 @@ The `d2l-list-controls` component can be placed in the `d2l-list`'s `controls` s
   import '@brightspace-ui/core/components/list/list-item-content.js';
   import '@brightspace-ui/core/components/selection/selection-action.js';
 </script>
+<!-- docs: start hidden content -->
+<style>
+  #demo-element {
+    margin-bottom: 300px;
+    margin-top: 0;
+  }
+</style>
+<!-- docs: end hidden content -->
 
 <d2l-list>
   <d2l-list-controls slot="controls">

package/components/selection/README.md

@@ -64,7 +64,7 @@ The `SelectionMixin` defines the `selection-single` attribute that consumers can
 </style>
 <!-- docs: end hidden content -->
 <d2l-demo-selection>
-  <d2l-selection-controls>
+  <d2l-selection-controls no-sticky>
     <d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
     <d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
   </d2l-selection-controls>
@@ -436,7 +436,7 @@ The `d2l-selection-controls` provides a standardized wrapper to display selectio
 
 When using lists, use the list-specific `d2l-list-controls` instead, which extends this component's behaviour.
 
-<!-- docs: demo live name:d2l-selection-controls display:block -->
+<!-- docs: demo live name:d2l-selection-controls display:block autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-action.js';
@@ -446,6 +446,10 @@ When using lists, use the list-specific `d2l-list-controls` instead, which exten
 </script>
 <!-- docs: start hidden content -->
 <style>
+  #demo-element {
+    margin-bottom: 250px;
+    margin-top: 0;
+  }
   ul {
     padding: 0;
   }

package/components/table/README.md

@@ -329,7 +329,7 @@ The `d2l-table-controls` component can be placed in the `d2l-table-wrapper`'s `c
     render() {
       return html`
         <d2l-table-wrapper>
-          <d2l-table-controls slot="controls" no-sticky>
+          <d2l-table-controls slot="controls">
             <d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
             <d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
           </d2l-table-controls>
@@ -342,9 +342,9 @@ The `d2l-table-controls` component can be placed in the `d2l-table-wrapper`'s `c
             </thead>
             <tbody>
               ${Object.keys(this._data).map((key, i) => html`
-                <tr ?selected="${i === 0}">
+                <tr>
                   <td>
-                    <d2l-selection-input selected key="${key}" label="${key}" ?checked="${this._data[key].checked}" @d2l-selection-change="${this._selectRow}"></d2l-selection-input>
+                    <d2l-selection-input key="${key}" label="${key}" ?selected="${this._data[key].checked}" @d2l-selection-change="${this._selectRow}"></d2l-selection-input>
                   </td>
                   <td>this row is ${!this._data[key].checked ? 'not' : ''} selected</td>
                 </tr>
@@ -357,12 +357,21 @@ The `d2l-table-controls` component can be placed in the `d2l-table-wrapper`'s `c
 
     _selectRow(e) {
       const key = e.target.key;
-      this._data[key].checked = !this._data[key].checked;
+      this._data[key].checked = e.target.selected;
+      this.requestUpdate();
     }
 
   }
   customElements.define('d2l-sample-table-with-controls', SampleTableWithControls);
 </script>
+<!-- docs: start hidden content -->
+<style>
+  #demo-element {
+    margin-bottom: 300px;
+    margin-top: 0;
+  }
+</style>
+<!-- docs: end hidden content -->
 <d2l-sample-table-with-controls></d2l-sample-table-with-controls>
 ```
 

package/components/table/table-controls.js

@@ -1,6 +1,6 @@
 import '../selection/selection-select-all-pages.js';
 import '../selection/selection-summary.js';
-import { html, nothing } from 'lit';
+import { css, html, nothing } from 'lit';
 import { SelectionControls } from '../selection/selection-controls.js';
 
 /**
@@ -17,6 +17,18 @@ class TableControls extends SelectionControls {
 		};
 	}
 
+	static get styles() {
+		return [super.styles, css`
+			:host {
+				--d2l-selection-controls-background-color: var(--d2l-table-controls-background-color);
+				z-index: 2; /* must be greater than d2l-table rows */
+			}
+			:host([no-sticky]) {
+				z-index: auto;
+			}
+		`];
+	}
+
 	_renderSelection() {
 		return html`
 			<d2l-selection-summary

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.85.4",
+  "version": "2.85.6",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",