@brightspace-ui/core 2.7.2 → 2.10.0

package/components/button/button-icon.js

@@ -60,7 +60,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 					--d2l-button-icon-min-height: calc(2rem + 2px);
 					--d2l-button-icon-min-width: calc(2rem + 2px);
 					--d2l-button-icon-h-align: calc(((2rem + 2px - 0.9rem) / 2) * -1);
-					--d2l-icon-fill-color: var(--d2l-button-icon-fill-color, var(--d2l-color-ferrite));
+					--d2l-icon-fill-color: var(--d2l-button-icon-fill-color, var(--d2l-color-tungsten));
 					display: inline-block;
 				}
 				:host([hidden]) {
@@ -75,7 +75,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 				}
 				:host([theme="dark"]) {
 					--d2l-button-icon-background-color: transparent;
-					--d2l-button-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* ferrite @70% @90% */
+					--d2l-button-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
 					--d2l-button-icon-focus-box-shadow: 0 0 0 2px black, 0 0 0 4px var(--d2l-color-celestine-plus-1);
 					--d2l-icon-fill-color: var(--d2l-color-sylvite);
 					--d2l-button-icon-fill-color-hover: var(--d2l-color-sylvite);
@@ -112,7 +112,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 				button:hover,
 				button:focus,
 				:host([active]) button {
-					--d2l-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-color-ferrite));
+					--d2l-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-color-tungsten));
 					background-color: var(--d2l-button-icon-background-color-hover);
 				}
 				button.focus-visible {

package/components/button/floating-buttons.js

@@ -61,7 +61,7 @@ class FloatingButtons extends RtlMixin(LitElement) {
 				background-color: #ffffff;
 				background-color: rgba(255, 255, 255, 0.88);
 				border-top-color: var(--d2l-color-mica);
-				box-shadow: 0 -2px 4px rgba(73, 76, 78, 0.2); /* ferrite */
+				box-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */
 			}
 
 			:host([_floating]:not([always-float])) .d2l-floating-buttons-container {

package/components/card/demo/card.html

@@ -31,7 +31,7 @@
 			}
 			.badge > img {
 				background-color: white;
-				border: 1px solid #494c4e;
+				border: 1px solid #202122; /* ferrite */
 				border-radius: 6px;
 				height: 70px;
 				object-fit: cover;

package/components/colors/colors.js

@@ -8,11 +8,11 @@ if (!document.head.querySelector('#d2l-colors')) {
 			--d2l-color-sylvite: #f1f5fb;
 			--d2l-color-gypsum: #e3e9f1;
 			--d2l-color-mica: #cdd5dc;
-			--d2l-color-corundum: #b5bdc2;
-			--d2l-color-chromite: #9ea5a9;
-			--d2l-color-galena: #868c8f;
-			--d2l-color-tungsten: #6e7376;
-			--d2l-color-ferrite: #494c4e;
+			--d2l-color-corundum: #b1b9be;
+			--d2l-color-chromite: #90989d;
+			--d2l-color-galena: #6e7477;
+			--d2l-color-tungsten: #494c4e;
+			--d2l-color-ferrite: #202122;
 
 			/* zircon */
 			--d2l-color-zircon-plus-2: #e0feff;

package/components/colors/colors.scss

@@ -3,11 +3,11 @@ $d2l-color-regolith: #f9fbff !default;
 $d2l-color-sylvite: #f1f5fb !default;
 $d2l-color-gypsum: #e3e9f1 !default;
 $d2l-color-mica: #cdd5dc !default;
-$d2l-color-corundum: #b5bdc2 !default;
-$d2l-color-chromite: #9ea5a9 !default;
-$d2l-color-galena: #868c8f !default;
-$d2l-color-tungsten: #6e7376 !default;
-$d2l-color-ferrite: #494c4e !default;
+$d2l-color-corundum: #b1b9be !default;
+$d2l-color-chromite: #90989d !default;
+$d2l-color-galena: #6e7477 !default;
+$d2l-color-tungsten: #494c4e !default;
+$d2l-color-ferrite: #202122 !default;
 
 // zircon
 $d2l-color-zircon-plus-2: #e0feff !default;

package/components/dropdown/dropdown-content-styles.js

@@ -24,8 +24,8 @@ export const dropdownContentStyles = css`
 	:host([theme="dark"]) {
 		--d2l-dropdown-above-animation-name: d2l-dropdown-above-animation-dark;
 		--d2l-dropdown-animation-name: d2l-dropdown-animation-dark;
-		--d2l-dropdown-background-color: #333536; /* ferrite @ 70% */
-		--d2l-dropdown-border-color: var(--d2l-color-ferrite);
+		--d2l-dropdown-background-color: #333536; /* tungsten @ 70% */
+		--d2l-dropdown-border-color: var(--d2l-color-tungsten);
 		--d2l-dropdown-foreground-color: var(--d2l-color-sylvite);
 		--d2l-dropdown-shadow-color: rgba(0, 0, 0, 1);
 		opacity: 0.9;
@@ -66,7 +66,7 @@ export const dropdownContentStyles = css`
 		background-color: var(--d2l-dropdown-background-color);
 		border: 1px solid var(--d2l-dropdown-border-color);
 		border-radius: 0.1rem;
-		box-shadow: -4px -4px 12px -5px rgba(73, 76, 78, 0.2); /* ferrite */
+		box-shadow: -4px -4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */
 		height: 16px;
 		-webkit-transform: rotate(45deg);
 		transform: rotate(45deg);
@@ -80,7 +80,7 @@ export const dropdownContentStyles = css`
 	}
 
 	:host([opened-above]) .d2l-dropdown-content-pointer > div {
-		box-shadow: 4px 4px 12px -5px rgba(73, 76, 78, 0.2); /* ferrite */
+		box-shadow: 4px 4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */
 	}
 
 	:host([no-pointer]) .d2l-dropdown-content-pointer {

package/components/filter/filter.js

@@ -406,8 +406,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 						key="${item.key}"
 						label="${item.text}"
 						selectable
-						?selected="${item.selected}"
-						slim>
+						?selected="${item.selected}">
 						<div class="d2l-filter-dimension-set-value-text d2l-body-compact">${item.text}</div>
 					</d2l-list-item>
 				`)}

package/components/html-block/html-block.js

@@ -96,7 +96,7 @@ export const htmlBlockContentStyles = css`
 		a:visited,
 		a:link,
 		a:active {
-			color: var(--d2l-color-ferrite, #494c4e);
+			color: var(--d2l-color-ferrite, #202122);
 		}
 	}
 	mjx-assistive-mml math {

package/components/icons/README.md

@@ -80,7 +80,7 @@ When contributing changes to icons, the SVG files should be properly formatted.
   - not contain negative values
 - there should be no `<title>` element
 - there should be no inline `<style>` -- all style for line fills should be applied directly to the SVG elements
-- color of SVG elements should be "ferrite" (`#494c4e`)
+- color of SVG elements should be "tungsten" (`#494c4e`)
 
 The best way to have most of these rules applied for you automatically is to put the icon through [SVGOMG](https://jakearchibald.github.io/svgomg/) with these options selected:
 * `Prettify code` - ON

package/components/icons/icon-styles.js

@@ -5,7 +5,7 @@ export const iconStyles = css`
 	:host {
 		-webkit-align-items: center;
 		align-items: center;
-		color: var(--d2l-color-ferrite);
+		color: var(--d2l-color-tungsten);
 		display: -ms-inline-flexbox;
 		display: -webkit-inline-flex;
 		display: inline-flex;

package/components/icons/images/tier2/check-box-unchecked.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <rect fill="#f9fbff" stroke-width="1" stroke="#868c8f" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
+  <rect fill="#f9fbff" stroke-width="1" stroke="#6e7477" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
 </svg>

package/components/icons/images/tier2/check-box.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <rect fill="#f9fbff" stroke-width="1" stroke="#868c8f" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
+  <rect fill="#f9fbff" stroke-width="1" stroke="#6e7477" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
   <path fill="#494c4e" d="M19.707,7.293a1,1,0,0,0-1.414,0L10,15.586,6.707,12.293a1,1,0,0,0-1.414,1.414l4,4a1,1,0,0,0,1.414,0l9-9A1,1,0,0,0,19.707,7.293Z"/>
 </svg>

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

@@ -33,7 +33,7 @@ export const selectStyles = css`
 		background-color: #ffffff;
 		border-color: var(--d2l-color-galena);
 		border-width: 1px;
-		box-shadow: inset 0 2px 0 0 rgba(181, 189, 194, 0.2); /* corundum */
+		box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
 		padding: 0.4rem 0.75rem;
 	}
 	.d2l-input-select,

package/components/inputs/input-styles.js

@@ -6,7 +6,7 @@ export const inputStyles = css`
 		background-color: var(--d2l-input-background-color, #ffffff);
 		border-radius: var(--d2l-input-border-radius, 0.3rem);
 		border-style: solid;
-		box-shadow: inset 0 2px 0 0 rgba(181, 189, 194, 0.2); /* corundum */
+		box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
 		box-sizing: border-box;
 		color: var(--d2l-color-ferrite);
 		display: inline-block;

package/components/inputs/sass/select.scss

@@ -27,7 +27,7 @@
 		background-color: #ffffff;
 		border-color: $d2l-color-galena;
 		border-width: 1px;
-		box-shadow: inset 0 2px 0 0 rgba(181, 189, 194, .2); /* corundum */
+		box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
 		padding: 0.4rem 0.75rem;
 	}
 	&,

package/components/inputs/sass/text.scss

@@ -10,7 +10,7 @@
 	border-radius: 0.3rem;
 	border-style: solid;
 	border-width: 1px;
-	box-shadow: inset 0 2px 0 0 rgba(181, 189, 194, .2), /* corundum */;
+	box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2), /* corundum */;
 	box-sizing: border-box;
 	color: $d2l-color-ferrite;
 	display: inline-block;

package/components/list/README.md

@@ -313,7 +313,6 @@ The `d2l-list-header` component can be placed in the `d2l-list`'s `header` slot
 |---|---|---|
 | `no-selection` | Boolean | Whether to render select-all and selection summary |
 | `no-sticky` | Boolean | Disables sticky positioning for the header |
-| `padding-type` | String | Header whitespace (`normal` (default), `slim`) |
 | `select-all-pages-allowed` | Boolean | Whether all pages can be selected |
 <!-- docs: end hidden content -->
 
@@ -364,7 +363,7 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 | `key` | String | Value to identify item if selectable or draggable |
 | `label` | String | Explicitly defined label for the element |
 | `labelled-by` | String | The id of element that provides the label for this element |
-| `padding-type` | String | List item whitespace (`normal` (default), `slim`, `none`)|
+| `padding-type` | String | List item whitespace (`normal` (default), `none`)|
 | `selectable` | Boolean | Indicates an input should be rendered for selecting the item |
 | `selected` | Boolean | Whether the item is selected |
 | `skeleton` | Boolean | Renders the input as a skeleton loader |
@@ -436,10 +435,10 @@ The `d2l-list-item-button` provides the same functionality as `d2l-list-item` ex
 | `key` | String | Value to identify item if selectable or draggable |
 | `label` | String | Explicitly defined label for the element |
 | `labelled-by` | String | The id of element that provides the label for this element |
+| `padding-type` | String | List item whitespace (`normal` (default), `none`)|
 | `selectable` | Boolean | Indicates an input should be rendered for selecting the item |
 | `selected` | Boolean | Whether the item is selected |
 | `skeleton` | Boolean | Renders the input as a skeleton loader |
-| `slim` | Boolean | Whether to render the list-item with reduced whitespace|
 
 ### Events
 

package/components/list/demo/list-item-layouts.html

@@ -17,11 +17,6 @@
 				height: 500px;
 				object-fit: cover;
 			}
-			d2l-list-item[slim] div {
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-			}
 		</style>
 	</head>
 	<body unresolved>
@@ -58,30 +53,6 @@
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Slim</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-list>
-						<d2l-list-item slim>
-							<d2l-list-item-content>
-								<div>Identify categories of physical activities</div>
-							</d2l-list-item-content>
-						</d2l-list-item>
-						<d2l-list-item slim>
-							<d2l-list-item-content>
-								<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
-							</d2l-list-item-content>
-						</d2l-list-item>
-						<d2l-list-item slim>
-							<d2l-list-item-content>
-								<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
-							</d2l-list-item-content>
-						</d2l-list-item>
-					</d2l-list>
-				</template>
-			</d2l-demo-snippet>
-
 			<h2>Separators: between</h2>
 
 			<d2l-demo-snippet>
@@ -301,33 +272,6 @@
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Selectable, Slim, Extended Separators</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-list extend-separators>
-						<d2l-list-item slim selectable key="1" label="Introductory Earth Sciences">
-							<d2l-list-item-content>
-								<div>Introductory Earth Sciences</div>
-								<div slot="supporting-info">This course explores the geological process of the Earth's interior and surface. These include volcanism, earthquakes, mountains...</div>
-							</d2l-list-item-content>
-						</d2l-list-item>
-						<d2l-list-item slim selectable key="2" selected label="Engineering Materials for Energy Systems">
-							<d2l-list-item-content>
-								<div>Engineering Materials for Energy Systems</div>
-								<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
-							</d2l-list-item-content>
-						</d2l-list-item>
-						<d2l-list-item slim selectable key="3" label="Geomorphology and GIS">
-							<d2l-list-item-content>
-								<div>Geomorphology and GIS </div>
-								<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
-							</d2l-list-item-content>
-						</d2l-list-item>
-					</d2l-list>
-				</template>
-			</d2l-demo-snippet>
-
 		</d2l-demo-page>
 
 	</body>

package/components/list/list-header.js

@@ -26,23 +26,11 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 			 * @type {boolean}
 			 */
 			noSticky: { type: Boolean, attribute: 'no-sticky' },
-			/**
-			 * How much padding to render list items with
-			 * @type {'normal'|'slim'}
-			 */
-			paddingType: { type: String, attribute: 'padding-type' },
 			/**
 			 * Whether all pages can be selected
 			 * @type {boolean}
 			 */
 			selectAllPagesAllowed: { type: Boolean, attribute: 'select-all-pages-allowed' },
-			/**
-			 * @ignore
-			 * Whether to render a header with reduced whitespace
-			 * TODO: Remove
-			 * @type {boolean}
-			 */
-			slim: { reflect: true, type: Boolean },
 			_scrolled: { type: Boolean, reflect: true }
 		};
 	}
@@ -81,12 +69,6 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 				display: flex;
 				margin-bottom: 6px;
 				margin-top: 6px;
-				min-height: 58px;
-			}
-			:host([slim]) .d2l-list-header-container { /* TODO: Remove */
-				min-height: 36px;
-			}
-			:host([padding-type="slim"]) .d2l-list-header-container {
 				min-height: 36px;
 			}
 			.d2l-list-header-extend-separator {
@@ -126,9 +108,7 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 		super();
 		this.noSelection = false;
 		this.noSticky = false;
-		this.paddingType = 'normal';
 		this.selectAllPagesAllowed = false;
-		this.slim = false;
 		this._extendSeparator = false;
 	}
 

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

@@ -59,16 +59,9 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			dragTargetHandleOnly: { type: Boolean, attribute: 'drag-target-handle-only' },
 			/**
 			 * How much padding to render list items with
-			 * @type {'normal'|'slim'|'none'}
+			 * @type {'normal'|'none'}
 			 */
 			paddingType: { type: String, attribute: 'padding-type' },
-			/**
-			 * @ignore
-			 * Whether to render the list-item with reduced whitespace.
-			 * TODO: Remove in favor of padding-type="slim"
-			 * @type {boolean}
-			 */
-			slim: { type: Boolean },
 			_breakpoint: { type: Number },
 			_displayKeyboardTooltip: { type: Boolean },
 			_dropdownOpen: { type: Boolean, attribute: '_dropdown-open', reflect: true },
@@ -182,14 +175,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				padding-left: 0.55rem;
 				padding-right: 0;
 			}
-			:host([slim]) [slot="content"] { /* TODO, remove */
-				padding-bottom: 0.4rem;
-				padding-top: 0.4rem;
-			}
-			:host([padding-type="slim"]) [slot="content"] {
-				padding-bottom: 0.4rem;
-				padding-top: 0.4rem;
-			}
 			:host([padding-type="none"]) [slot="content"] {
 				padding-bottom: 0;
 				padding-top: 0;
@@ -277,14 +262,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			.d2l-list-item-content-extend-separators d2l-selection-input {
 				margin-left: 0.9rem;
 			}
-			:host([slim]) d2l-selection-input { /* TODO, remove */
-				margin-bottom: 0.4rem;
-				margin-top: 0.4rem;
-			}
-			:host([padding-type="slim"]) d2l-selection-input {
-				margin-bottom: 0.4rem;
-				margin-top: 0.4rem;
-			}
 			d2l-list-item-drag-handle {
 				margin: 0.25rem 0 0.25rem 0.4rem;
 			}
@@ -366,7 +343,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 	constructor() {
 		super();
 		this.breakpoints = defaultBreakpoints;
-		this.slim = false;
 		this.paddingType = 'normal';
 		this._breakpoint = 0;
 		this._contentId = getUniqueId();

package/components/menu/menu.js

@@ -65,12 +65,12 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
 			}
 
 			:host([theme="dark"]) {
-				--d2l-menu-background-color: #333536; /* ferrite @ 70% */
+				--d2l-menu-background-color: #333536; /* tungsten @ 70% */
 				--d2l-menu-background-color-hover: #123559; /* celestine-1 @ 50% */
-				--d2l-menu-border-color: var(--d2l-color-ferrite);
+				--d2l-menu-border-color: var(--d2l-color-tungsten);
 				--d2l-menu-foreground-color: var(--d2l-color-sylvite);
 				--d2l-menu-foreground-color-hover: #ffffff;
-				--d2l-menu-separator-color: var(--d2l-color-tungsten);
+				--d2l-menu-separator-color: var(--d2l-color-galena);
 				--d2l-icon-fill-color: var(--d2l-color-mica);
 				background-color: var(--d2l-menu-background-color); /* so that opacity on disabled items works */
 			}

package/components/status-indicator/status-indicator.js

@@ -68,8 +68,8 @@ class StatusIndicator extends LitElement {
 			}
 			:host([state="none"]),
 			:host([state="null"]) {
-				border-color: var(--d2l-color-ferrite);
-				color: var(--d2l-color-ferrite);
+				border-color: var(--d2l-color-tungsten);
+				color: var(--d2l-color-tungsten);
 			}
 
 			:host([bold]) {
@@ -84,7 +84,7 @@ class StatusIndicator extends LitElement {
 			}
 			:host([bold][state="none"]),
 			:host([bold][state="null"]) {
-				background-color: var(--d2l-color-ferrite);
+				background-color: var(--d2l-color-tungsten);
 			}
 		`;
 	}

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

@@ -10,23 +10,48 @@
 			import '../tag-list-item.js';
 			import '../test/tag-list-item-mixin-consumer.js';
 		</script>
+		<style>
+			.actions {
+				margin-bottom: 1rem;
+			}
+		</style>
 	</head>
 	<body unresolved>
 		<d2l-demo-page page-title="d2l-tag-list">
 
 			<h2>Basic Tag List</h2>
+
+			<div class="actions">
+				<button id="add">add tag (first)</button>
+				<button id="remove">remove tag (first)</button>
+			</div>
+			<script>
+				let addIndex = 0;
+				document.querySelector('#add').addEventListener('click', () => {
+					const tag = document.createElement('d2l-tag-list-item');
+					tag.text = `Added Tag ${++addIndex}`;
+					document.querySelector('d2l-tag-list').insertBefore(tag, document.querySelector('d2l-tag-list').children[0]);
+				});
+
+				document.querySelector('#remove').addEventListener('click', () => {
+					const children = document.querySelector('d2l-tag-list').children;
+					if (children.length === 0) return;
+					document.querySelector('d2l-tag-list').removeChild(children[0]);
+				});
+
+			</script>
 			<d2l-demo-snippet fullscreen>
 				<d2l-tag-list description="A bunch of example tags">
 					<d2l-tag-list-item text="Example Tag"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Longer Example Tag - much much much much much longer"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Longer Example Tag - much much much much much much much much longer"></d2l-tag-list-item>
 					<d2l-tag-list-item text="Another Example Tag"></d2l-tag-list-item>
 					<d2l-tag-list-item-mixin-consumer name="Custom Tag List Item"></d2l-tag-list-item-mixin-consumer>
 					<d2l-tag-list-item text="Example Tag 5"></d2l-tag-list-item>
 					<d2l-tag-list-item text="Example Tag 6"></d2l-tag-list-item>
 					<d2l-tag-list-item text="Example Tag 7"></d2l-tag-list-item>
-				</d2l-tag-list>		
+				</d2l-tag-list>
 			</d2l-demo-snippet>
 
 		</d2l-demo-page>
 	</body>
-</html>
+</html>

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

@@ -1,5 +1,7 @@
 import '../colors/colors.js';
+import '../tooltip/tooltip.js';
 import { css, html } from 'lit';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { labelStyles } from '../typography/styles.js';
 
 export const TagListItemMixin = superclass => class extends superclass {
@@ -17,19 +19,12 @@ export const TagListItemMixin = superclass => class extends superclass {
 		return [labelStyles, css`
 			:host {
 				display: grid;
+				max-width: 100%;
 				outline: none;
 			}
 			:host([hidden]) {
 				display: none;
 			}
-			.tag-list-item-content {
-				height: 1rem;
-				margin: auto;
-				min-width: 0;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-			}
 			.tag-list-item-container {
 				background-color: var(--d2l-color-regolith);
 				border-radius: 6px;
@@ -37,21 +32,26 @@ export const TagListItemMixin = superclass => class extends superclass {
 				box-sizing: border-box;
 				color: var(--d2l-color-ferrite);
 				cursor: pointer;
-				display: flex;
+				max-width: 320px;
 				min-width: 0;
+				outline: none;
+				overflow: hidden;
 				padding: 0.25rem 0.6rem;
+				text-overflow: ellipsis;
 				transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
+				white-space: nowrap;
+			}
+			.tag-list-item-container:focus,
+			:host(:hover) .tag-list-item-container:focus {
+				box-shadow: inset 0 0 0 2px var(--d2l-color-celestine), 0 2px 4px rgba(0, 0, 0, 0.03);
 			}
 			:host(:hover) .tag-list-item-container,
-			:host(:focus) .tag-list-item-container {
+			.tag-list-item-container:focus {
 				background-color: var(--d2l-color-sylvite);
 			}
 			:host(:hover) .tag-list-item-container {
 				box-shadow: inset 0 0 0 1px var(--d2l-color-mica), 0 2px 4px rgba(0, 0, 0, 0.03);
 			}
-			:host(:focus) .tag-list-item-container {
-				box-shadow: inset 0 0 0 2px var(--d2l-color-celestine), 0 2px 4px rgba(0, 0, 0, 0.03);
-			}
 
 			@media (prefers-reduced-motion: reduce) {
 				.tag-list-item-container {
@@ -65,12 +65,27 @@ export const TagListItemMixin = superclass => class extends superclass {
 		super();
 		/** @ignore */
 		this.role = 'listitem';
+		this._id = getUniqueId();
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		const container = this.shadowRoot.querySelector('.tag-list-item-container');
+		this.addEventListener('focus', () => container.focus());
+		this.addEventListener('blur', () => container.blur());
 	}
 
-	_renderTag(tagContent) {
+	_renderTag(tagContent, hasTruncationTooltip) {
+		const tooltip = hasTruncationTooltip ? html`
+				<d2l-tooltip for="${this._id}" show-truncated-only>
+					${tagContent}
+				</d2l-tooltip>
+			` : null;
 		return html`
-			<div class="tag-list-item-container d2l-label-text">
-				<div class="tag-list-item-content">${tagContent}</div>
+			${tooltip}
+			<div class="tag-list-item-container d2l-label-text" id="${this._id}" tabindex="-1">
+				${tagContent}
 			</div>
 		`;
 	}

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

@@ -14,7 +14,7 @@ class TagListItem extends TagListItemMixin(LitElement) {
 	}
 
 	render() {
-		return this._renderTag(this.text);
+		return this._renderTag(this.text, true);
 	}
 }
 

package/components/tag-list/tag-list.js

@@ -14,7 +14,7 @@ const PAGE_SIZE_LINES = {
 	medium: 2,
 	small: 3
 };
-const MARGIN_TOP_HEIGHT = 6;
+const MARGIN_TOP_RIGHT = 6;
 
 class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 
@@ -44,7 +44,6 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 				flex-wrap: wrap;
 				margin: -6px -6px 0 0;
 				padding: 0;
-				position: relative;
 			}
 			::slotted(*),
 			d2l-button-subtle {
@@ -65,7 +64,7 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 		/** @ignore */
 		this.arrowKeysDirection = 'leftrightupdown';
 		this._chompIndex = 10000;
-		this._items = [];
+		this._hasResized = false;
 		this._resizeObserver = null;
 		this._showHiddenTags = false;
 	}
@@ -73,11 +72,18 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._resizeObserver) this._resizeObserver.disconnect();
+		if (this._subtleButtonResizeObserver) this._subtleButtonResizeObserver.disconnect();
 	}
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
+		const subtleButton  = this.shadowRoot.querySelector('.d2l-tag-list-hidden-button');
+		this._subtleButtonResizeObserver = new ResizeObserver(() => {
+			this._subtleButtonWidth = Math.ceil(parseFloat(getComputedStyle(subtleButton).getPropertyValue('width')));
+		});
+		this._subtleButtonResizeObserver.observe(subtleButton);
+
 		const container = this.shadowRoot.querySelector('.tag-list-outer-container');
 		this._resizeObserver = new ResizeObserver((e) => requestAnimationFrame(() => this._handleResize(e)));
 		this._resizeObserver.observe(container);
@@ -86,15 +92,17 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 	render() {
 		let hiddenCount = 0;
 		let hasHiddenTags = false;
-		this._items.forEach((element, index) => {
-			if (index >= this._chompIndex) hasHiddenTags = true;
-			if (!this._showHiddenTags && index >= this._chompIndex) {
-				hiddenCount++;
-				element.setAttribute('data-is-chomped', '');
-			} else {
-				element.removeAttribute('data-is-chomped');
-			}
-		});
+		if (this._items) {
+			this._items.forEach((element, index) => {
+				if (index >= this._chompIndex) hasHiddenTags = true;
+				if (!this._showHiddenTags && index >= this._chompIndex) {
+					hiddenCount++;
+					element.setAttribute('data-is-chomped', '');
+				} else {
+					element.removeAttribute('data-is-chomped');
+				}
+			});
+		}
 
 		let button = null;
 		if (hasHiddenTags) {
@@ -123,7 +131,7 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 		`;
 
 		const outerContainerStyles = {
-			maxHeight: (this._showHiddenTags || !this._lines) ? undefined : `${(this._itemHeight + MARGIN_TOP_HEIGHT) * this._lines}px`
+			maxHeight: (this._showHiddenTags || !this._lines) ? undefined : `${(this._itemHeight + MARGIN_TOP_RIGHT) * this._lines}px`
 		};
 
 		return html`
@@ -140,15 +148,12 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 	}
 
 	focus() {
-		if (this._items.length > 0) this._items[0].focus();
+		if (this._items && this._items.length > 0) this._items[0].focus();
 	}
 
 	_chomp() {
 		if (!this.shadowRoot || !this._lines || !this._itemLayouts) return;
 
-		const subtleButton  = this.shadowRoot.querySelector('.d2l-tag-list-hidden-button');
-		const subtleButtonWidth = Math.ceil(parseFloat(getComputedStyle(subtleButton).getPropertyValue('width')));
-
 		const showing = {
 			count: 0,
 			width: 0
@@ -166,9 +171,10 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 
 			for (let i = overflowingIndex; i < this._itemLayouts.length; i++) {
 				const itemLayout = this._itemLayouts[i];
+				const itemWidth = Math.min(itemLayout.width, this._availableWidth);
 
-				if (!isOverflowing && showing.width + itemLayout.width < this._availableWidth) {
-					showing.width += itemLayout.width;
+				if (!isOverflowing && ((showing.width + itemWidth) <= (this._availableWidth + MARGIN_TOP_RIGHT))) {
+					showing.width += itemWidth;
 					showing.count += 1;
 					itemLayout.trigger = 'soft-show';
 				} else if (k < this._lines) {
@@ -179,7 +185,6 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 					itemLayout.trigger = 'soft-hide';
 				}
 			}
-
 		}
 
 		if (!isOverflowing) {
@@ -189,7 +194,7 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 
 		// calculate if additional item(s) should be hidden due to subtle button needing space
 		for (let j = this._itemLayouts.length; j--;) {
-			if ((showing.width + subtleButtonWidth) < this._availableWidth) {
+			if ((showing.width + this._subtleButtonWidth) < this._availableWidth) {
 				break;
 			}
 			const itemLayoutOverflowing = this._itemLayouts[j];
@@ -223,29 +228,39 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 		return slot.assignedNodes({ flatten: true }).filter((node) => {
 			if (node.nodeType !== Node.ELEMENT_NODE) return false;
 			const role = node.getAttribute('role');
+			node.removeAttribute('data-is-chomped');
 			return (role === 'listitem');
 		});
 	}
 
 	_handleResize(entries) {
-		this._availableWidth = Math.ceil(entries[0].contentRect.width);
+		this._availableWidth = Math.floor(entries[0].contentRect.width);
 		if (this._availableWidth >= PAGE_SIZE.large) this._lines = PAGE_SIZE_LINES.large;
 		else if (this._availableWidth < PAGE_SIZE.large && this._availableWidth >= PAGE_SIZE.medium) this._lines = PAGE_SIZE_LINES.medium;
 		else this._lines = PAGE_SIZE_LINES.small;
+		if (!this._hasResized) {
+			this._hasResized = true;
+			this._handleSlotChange();
+		}
 		this._chomp();
 	}
 
 	_handleSlotChange() {
-		requestAnimationFrame(() => {
+		if (!this._hasResized) return;
+
+		requestAnimationFrame(async() => {
 			this._items = this._getTagListItems();
-			this._itemLayouts = this._getItemLayouts(this._items);
+			if (!this._items || this._items.length === 0) return;
 
-			if (this._items.length === 0) return;
+			await Promise.all(this._items.map(item => item.updateComplete));
+
+			this._itemLayouts = this._getItemLayouts(this._items);
 			this._itemHeight = this._items[0].offsetHeight;
 			this._items.forEach((item, index) => {
 				item.setAttribute('tabIndex', index === 0 ? 0 : -1);
 			});
 			this._chomp();
+			this.requestUpdate();
 		});
 	}
 

package/custom-elements.json

@@ -6510,7 +6510,7 @@
         {
           "name": "padding-type",
           "description": "How much padding to render list items with",
-          "type": "'normal'|'slim'|'none'",
+          "type": "'normal'|'none'",
           "default": "\"normal\""
         },
         {
@@ -6589,16 +6589,11 @@
           "type": "array",
           "default": "[842,636,580,0]"
         },
-        {
-          "name": "slim",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "paddingType",
           "attribute": "padding-type",
           "description": "How much padding to render list items with",
-          "type": "'normal'|'slim'|'none'",
+          "type": "'normal'|'none'",
           "default": "\"normal\""
         },
         {
@@ -6710,12 +6705,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "padding-type",
-          "description": "How much padding to render list items with",
-          "type": "'normal'|'slim'",
-          "default": "\"normal\""
-        },
         {
           "name": "select-all-pages-allowed",
           "description": "Whether all pages can be selected",
@@ -6738,24 +6727,12 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "paddingType",
-          "attribute": "padding-type",
-          "description": "How much padding to render list items with",
-          "type": "'normal'|'slim'",
-          "default": "\"normal\""
-        },
         {
           "name": "selectAllPagesAllowed",
           "attribute": "select-all-pages-allowed",
           "description": "Whether all pages can be selected",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "slim",
-          "type": "boolean",
-          "default": "false"
         }
       ],
       "slots": [
@@ -6784,7 +6761,7 @@
         {
           "name": "padding-type",
           "description": "How much padding to render list items with",
-          "type": "'normal'|'slim'|'none'",
+          "type": "'normal'|'none'",
           "default": "\"normal\""
         },
         {
@@ -6863,16 +6840,11 @@
           "type": "array",
           "default": "[842,636,580,0]"
         },
-        {
-          "name": "slim",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "paddingType",
           "attribute": "padding-type",
           "description": "How much padding to render list items with",
-          "type": "'normal'|'slim'|'none'",
+          "type": "'normal'|'none'",
           "default": "\"normal\""
         },
         {
@@ -7183,7 +7155,7 @@
         {
           "name": "padding-type",
           "description": "How much padding to render list items with",
-          "type": "'normal'|'slim'|'none'",
+          "type": "'normal'|'none'",
           "default": "\"normal\""
         },
         {
@@ -7274,16 +7246,11 @@
           "type": "array",
           "default": "[842,636,580,0]"
         },
-        {
-          "name": "slim",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "paddingType",
           "attribute": "padding-type",
           "description": "How much padding to render list items with",
-          "type": "'normal'|'slim'|'none'",
+          "type": "'normal'|'none'",
           "default": "\"normal\""
         },
         {

package/generated/icons/tier2/check-box-unchecked.js

@@ -1,5 +1,5 @@
 // auto-generated
 export const val = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <rect fill="#f9fbff" stroke-width="1" stroke="#868c8f" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
+  <rect fill="#f9fbff" stroke-width="1" stroke="#6e7477" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
 </svg>
 `;

package/generated/icons/tier2/check-box.js

@@ -1,6 +1,6 @@
 // auto-generated
 export const val = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <rect fill="#f9fbff" stroke-width="1" stroke="#868c8f" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
+  <rect fill="#f9fbff" stroke-width="1" stroke="#6e7477" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
   <path fill="#494c4e" d="M19.707,7.293a1,1,0,0,0-1.414,0L10,15.586,6.707,12.293a1,1,0,0,0-1.414,1.414l4,4a1,1,0,0,0,1.414,0l9-9A1,1,0,0,0,19.707,7.293Z"/>
 </svg>
 `;

package/package.json

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

package/templates/primary-secondary/primary-secondary.js

@@ -674,7 +674,7 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 
 			footer {
 				background-color: white;
-				box-shadow: 0 -2px 4px rgba(73, 76, 78, 0.2); /* ferrite */
+				box-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */
 				padding: 0.75rem 1rem;
 				z-index: 1; /* ensures the footer box-shadow is over main areas with background colours set */
 			}