@brightspace-ui/core 3.187.1 → 3.188.0

package/components/inputs/input-checkbox.js

@@ -80,7 +80,7 @@ export const checkboxStyles = css`
 	input[type="checkbox"].d2l-input-checkbox:focus,
 	input[type="checkbox"].d2l-input-checkbox.d2l-input-checkbox-focus,
 	:host(.d2l-hovering) input[type="checkbox"]:not(:disabled).d2l-input-checkbox {
-		border-color: var(--d2l-color-celestine);
+		border-color: var(--d2l-input-checkbox-border-color-hover-focus, var(--d2l-color-celestine));
 		border-width: 2px;
 		outline-width: 0;
 	}

package/components/inputs/input-radio-styles.js

@@ -44,7 +44,7 @@ export const radioStyles = css`
 	.d2l-input-radio:focus,
 	.d2l-input-radio-label > input[type="radio"]:hover,
 	.d2l-input-radio-label > input[type="radio"]:focus {
-		border-color: var(--d2l-color-celestine);
+		border-color: var(--d2l-input-radio-border-color-hover-focus, var(--d2l-color-celestine));
 		border-width: 2px;
 		outline: none;
 	}

package/components/list/demo/list-layout.html

@@ -149,6 +149,46 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Selectable</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-toggle pressed>
+						<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
+						<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
+					</d2l-button-toggle>
+					<d2l-list layout="tiles">
+						<d2l-list-item label="item 1" key="1" selectable>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Identify categories of physical activities</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation A1.2</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item label="item 2" key="2" selectable>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation B2.1</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item label="item 3" key="3" selectable>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation B2.2</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+					</d2l-list>
+					<script data-demo-hide>
+						(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Links</h2>
 
 			<d2l-demo-snippet>

package/components/list/list-item-checkbox-mixin.js

@@ -175,6 +175,8 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 				?_indeterminate="${this.selectionInfo.state === SelectionInfo.states.some}"
 				key="${this.key}"
 				label="${this.label}"
+				@mouseenter="${this._onMouseEnterSelection}"
+				@mouseleave="${this._onMouseLeaveSelection}"
 				?selected="${this.selected}"
 				?skeleton="${this.skeleton}">
 			</d2l-selection-input>

package/components/list/list-item-generic-layout.js

@@ -219,15 +219,18 @@ class ListItemGenericLayout extends LitElement {
 
 			:host([layout="tile"]) {
 				grid-template-columns:
-					[start] minmax(0, auto)
+					[start control-start] minmax(0, min-content)
+					[control-end] minmax(0, auto)
 					[end];
 				grid-template-rows:
-					[start] auto
-					[end];
+					[start header-start] minmax(0, min-content)
+					[header-end content-start] auto
+					[content-end end];
 				height: 100%;
 			}
 			:host([layout="tile"]) ::slotted([slot="content"]),
-			:host([layout="tile"]) ::slotted([slot="content-action"]) {
+			:host([layout="tile"]) ::slotted([slot="content-action"]),
+			:host([layout="tile"]) ::slotted([slot="control-action"]) {
 				grid-column: start / end;
 				grid-row: start / end;
 			}
@@ -235,6 +238,12 @@ class ListItemGenericLayout extends LitElement {
 				grid-column: start / end;
 				grid-row: start / end;
 			}
+			:host([layout="tile"]) ::slotted([slot="control"]) {
+				grid-column: control-start / control-end;
+				grid-row: start;
+				pointer-events: all;
+				width: unset;
+			}
 
 			:host([layout="tile"]) slot[name="add-top"],
 			:host([layout="tile"]) slot[name="control-container"],
@@ -243,8 +252,6 @@ class ListItemGenericLayout extends LitElement {
 			:host([layout="tile"]) slot[name="outside-control-action"],
 			:host([layout="tile"]) slot[name="color-indicator"],
 			:host([layout="tile"]) slot[name="expand-collapse"],
-			:host([layout="tile"]) slot[name="control-action"],
-			:host([layout="tile"]) slot[name="control"],
 			:host([layout="tile"]) slot[name="actions"],
 			:host([layout="tile"]) slot[name="drop-target"],
 			:host([layout="tile"]) slot[name="nested"],

package/components/list/list-item-mixin.js

@@ -193,10 +193,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				border-top: 0;
 			}
 
-			:host(:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators > [slot="control"] {
+			:host(:not([layout="tile"]):not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators > [slot="control"] {
 				width: 3rem;
 			}
-			:host(:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators > [slot="control"] ~ [slot="control-action"] [slot="content"] {
+			:host(:not([layout="tile"]):not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators > [slot="control"] ~ [slot="control-action"] [slot="content"] {
 				padding-inline-start: 3rem;
 			}
 			:host(:not([_has-color-slot])) .d2l-list-item-content-extend-separators [slot="content"] {
@@ -303,7 +303,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin-block: 0.55rem;
 				margin-inline-end: 0.55rem;
 			}
-			:host(:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators d2l-selection-input {
+			:host(:not([layout="tile"]):not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators d2l-selection-input {
 				margin-inline-start: 0.9rem;
 			}
 			:host(:not([_render-expand-collapse-slot])[_has-color-slot]) .d2l-list-item-content-extend-separators d2l-selection-input {
@@ -511,6 +511,33 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					border-color: transparent;
 				}
 			}
+
+			:host([layout="tile"]) d2l-selection-input {
+				--d2l-input-checkbox-border-color-hover-focus: var(--d2l-color-celestine-minus-1);
+				--d2l-input-radio-border-color-hover-focus: var(--d2l-color-celestine-minus-1);
+				border: 2px solid transparent;
+				border-radius: 8px;
+				margin: 0;
+				padding: 3px;
+			}
+			:host([layout="tile"][_focusing]) d2l-selection-input {
+				border: 2px solid white;
+			}
+			:host([layout="tile"]) [slot="control"] {
+				background-color: rgba(0, 0, 0, 0.5);
+				border-radius: 8px;
+				box-sizing: border-box;
+				margin: 0.5rem;
+				outline: 2px solid transparent;
+			}
+			:host([layout="tile"][_focusing]) [slot="control"] {
+				background-color: var(--d2l-color-celestine);
+				outline-color: var(--d2l-color-celestine-minus-1);
+			}
+			:host([layout="tile"][skeleton]) [slot="control"] {
+				background-color: transparent;
+			}
+
 		`];
 
 		super.styles && styles.unshift(super.styles);

package/package.json

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