@brightspace-ui/core 3.266.1 → 3.267.1

package/components/inputs/input-styles.js

@@ -1,8 +1,10 @@
 import { css, unsafeCSS } from 'lit';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusPseudoClass, getFocusVisibleStyles } from '../../helpers/focus.js';
+import { _isValidCssSelector } from '../../helpers/internal/css.js';
+import { getFlag } from '../../helpers/flags.js';
 import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
 
-const focusClass = unsafeCSS(getFocusPseudoClass());
+const focusClass = unsafeCSS(globalThis.document !== undefined ? getFocusPseudoClass() : 'focus-visible');
 
 registerSemanticVariableForSvgImageUrl(
 	'--d2l-input-invalid-image',
@@ -12,7 +14,142 @@ registerSemanticVariableForSvgImageUrl(
 	</svg>`
 );
 
-export const inputStyles = css`
+function getStyleDelegates(selector, focusSelector, textAreaSelector) {
+	return {
+		input: {
+			selector: focusClass => `
+				${focusSelector ? `${focusSelector},` : ''}
+				${selector}:${focusClass}:not(:disabled),
+				${selector}:hover:not(:disabled)
+			`,
+			style:  fullSelector => css`
+				${fullSelector} {
+					border-color: var(--d2l-theme-border-color-focus);
+					border-width: 2px;
+					outline: none;
+					padding: var(--d2l-input-padding-focus, calc(0.4rem - 1px) calc(0.75rem - 1px));
+				}
+			`
+		},
+		textarea: {
+			selector: focusClass => `
+				${textAreaSelector}:hover:not(:disabled),
+				${textAreaSelector}:${focusClass}:not(:disabled)
+			`,
+			style: fullSelector => css`
+				${fullSelector} {
+					padding-block: calc(0.5rem - 1px);
+				}
+			`
+		},
+		textareaInvalid: {
+			selector: focusClass => `
+				${textAreaSelector}-focus[aria-invalid="true"],
+				${textAreaSelector}[aria-invalid="true"]:hover,
+				${textAreaSelector}[aria-invalid="true"]:${focusClass}
+			`,
+			style: fullSelector => css`
+				${fullSelector} {
+					background-position: top calc(12px - 1px) var(--d2l-inline-end, right) calc(18px - 1px);
+					padding-inline-end: calc(18px + 0.8rem - 1px);
+				}
+			`
+		}
+	};
+}
+
+export function _generateInputStyles(selector, focusSelector) {
+	if (!_isValidCssSelector(selector) || (focusSelector && !_isValidCssSelector(focusSelector))) return '';
+	const lastSpaceIndex = selector.lastIndexOf(' ');
+	const textareaSelector = unsafeCSS(`${selector.substring(0, lastSpaceIndex + 1)}textarea${selector.substring(lastSpaceIndex + 1)}`);
+	const delegates = getStyleDelegates(selector, focusSelector, textareaSelector);
+
+	selector = unsafeCSS(selector);
+	return css`
+		${selector} {
+			background-color: var(--d2l-input-background-color, var(--d2l-theme-background-color-base));
+			border: 1px solid var(--d2l-input-border-color, var(--d2l-theme-border-color-emphasized));
+			border-radius: var(--d2l-input-border-radius, 0.3rem);
+			box-shadow: var(--d2l-theme-shadow-inset);
+			box-sizing: border-box;
+			color: var(--d2l-theme-text-color-static-standard);
+			display: inline-block;
+			font-family: inherit;
+			font-size: 0.8rem;
+			font-weight: 400;
+			height: var(--d2l-input-height, auto);
+			letter-spacing: 0.02rem;
+			line-height: 1.2rem;
+			margin: 0;
+			min-width: calc(2rem + 1em);
+			padding: var(--d2l-input-padding, 0.4rem 0.75rem);
+			position: var(--d2l-input-position, relative); /* overridden by sticky headers in grades */
+			text-align: var(--d2l-input-text-align, start);
+			vertical-align: middle;
+			width: 100%;
+		}
+		${getFocusVisibleStyles(delegates.input.selector, delegates.input.style)}
+
+		${selector}::placeholder {
+			color: var(--d2l-theme-text-color-static-faint);
+			font-size: 0.8rem;
+			font-weight: 400;
+			opacity: 1; /* Firefox has non-1 default */
+		}
+		${selector}::-ms-input-placeholder {
+			color: var(--d2l-theme-text-color-static-faint);
+			font-size: 0.8rem;
+			font-weight: 400;
+		}
+
+		[aria-invalid="true"]${selector}:not(:disabled) {
+			border-color: var(--d2l-theme-status-color-error);
+		}
+		${selector}:disabled {
+			opacity: var(--d2l-theme-opacity-disabled-control);
+		}
+		${selector}::-webkit-search-cancel-button,
+		${selector}::-webkit-search-decoration {
+			display: none;
+		}
+		${selector}::-ms-clear {
+			display: none;
+			height: 0;
+			width: 0;
+		}
+		${textareaSelector} {
+			line-height: normal;
+			padding-block: 0.5rem;
+		}
+		${getFocusVisibleStyles(delegates.textarea.selector, delegates.textarea.style)}
+		${textareaSelector}[aria-invalid="true"] {
+			background-image: var(--d2l-input-invalid-image);
+			background-position: top 12px var(--d2l-inline-end, right) 18px;
+			background-repeat: no-repeat;
+			background-size: 0.8rem 0.8rem;
+			padding-inline-end: calc(18px + 0.8rem);
+		}
+		${getFocusVisibleStyles(delegates.textareaInvalid.selector, delegates.textareaInvalid.style)}
+		${textareaSelector}[aria-invalid="true"]:disabled {
+			background-image: none;
+		}
+
+		@media (prefers-contrast: more) {
+			${selector}[aria-invalid="true"] {
+				background-color: Field;
+				border-color: var(--d2l-theme-status-color-error);
+				box-shadow: none;
+				color: FieldText;
+				forced-color-adjust: none;
+			}
+			${focusSelector ? css`${unsafeCSS(focusSelector)} {
+				border-color: Highlight;
+			}` : css``}
+		}
+	`;
+}
+
+export const inputStyles = getFlag('GAUD-8852-use-input-generated-styles', true) ? _generateInputStyles('.d2l-input', '.d2l-input-focus') : css`
 	.d2l-input {
 		background-color: var(--d2l-input-background-color, var(--d2l-theme-background-color-base));
 		border-radius: var(--d2l-input-border-radius, 0.3rem);

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

@@ -1,5 +1,6 @@
 import '../selection/selection-input.js';
 import { css, html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { isInteractiveInListItemComposedPath } from './list-item-mixin.js';
 import { SelectionInfo } from '../selection/selection-mixin.js';
@@ -57,6 +58,9 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 			:host([selection-disabled]) [slot="control-action"] [slot="content"] {
 				pointer-events: all;
 			}
+			:host([layout="tile"]) .bump-inline {
+				margin-inline-start: 2rem !important;
+			}
 		` ];
 
 		super.styles && styles.unshift(super.styles);
@@ -164,6 +168,9 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 	}
 
 	_renderCheckbox() {
+		const classes = {
+			'bump-inline': this._keyboardActive
+		};
 		return this.selectable ? html`
 			<d2l-selection-input
 				@d2l-selection-change="${this._onCheckboxChange}"
@@ -177,7 +184,8 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 				@mouseenter="${this._onMouseEnterSelection}"
 				@mouseleave="${this._onMouseLeaveSelection}"
 				?selected="${this.selected}"
-				?skeleton="${this.skeleton}">
+				?skeleton="${this.skeleton}"
+				class=${classMap(classes)}>
 			</d2l-selection-input>
 		` : nothing;
 	}

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

@@ -311,12 +311,32 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				width: 100%;
 				z-index: 1;
 			}
+
 			.d2l-list-item-drag-bottom-marker {
 				bottom: -6px;
 			}
 			.d2l-list-item-drag-top-marker {
 				top: -6px;
 			}
+
+			:host([layout="tile"]) .d2l-list-item-drag-bottom-marker,
+			:host([layout="tile"]) .d2l-list-item-drag-top-marker {
+				height: 100%;
+				width: auto;
+			}
+
+			:host([layout="tile"]) .d2l-list-item-drag-bottom-marker {
+				/* The gap between the cards plus half the width of the marker  */
+				inset-inline-end: calc(-0.9rem + 3px);
+				bottom: 0;
+			}
+			:host([layout="tile"]) .d2l-list-item-drag-top-marker {
+				/* The gap between the cards plus half the width of the marker  */
+				inset-inline-start: calc(-0.9rem + 3px);
+				top: 0;
+			}
+
+
 			.d2l-list-item-drag-area {
 				cursor: move;
 				height: 100%;
@@ -326,6 +346,11 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				grid-template-columns: 100%;
 				grid-template-rows: 1rem 1fr 1fr 1rem;
 			}
+			:host([layout="tile"]) .d2l-list-item-drag-drop-grid {
+				display: grid;
+				grid-template-columns: 1rem 1fr 1fr 1rem;
+				grid-template-rows: 100%;
+			}
 			:host([_drop-location="7"]) {
 				z-index: 1; /* drop target border must render on top of next adjacent border */
 			}
@@ -344,6 +369,10 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				d2l-list-item-drag-handle {
 					opacity: 0;
 				}
+				:host([layout="tile"][draggable]) d2l-list-item-drag-handle {
+					opacity: 1;
+				}
+
 				:host([selected]) d2l-list-item-drag-handle,
 				:host([current]) d2l-list-item-drag-handle,
 				:host([_drag-handle-show-always]) d2l-list-item-drag-handle,
@@ -858,6 +887,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				?disabled="${this.keyboardDragDisabled}"
 				text="${ifDefined(this.dragHandleText)}"
 				keyboard-text-info="${ifDefined(this._keyboardTextInfo)}"
+				layout="${this.layout}"
 				@focusin="${this._onFocusinDragHandle}"
 				@focusout="${this._onFocusoutDragHandle}"
 				@d2l-list-item-drag-handle-action="${this._onDragHandleActions}">

package/components/list/list-item-drag-handle.js

@@ -38,6 +38,9 @@ export const dragActions = Object.freeze({
 });
 
 let hasDisplayedKeyboardTooltip = false;
+export const resetDisplayedTooltip = () => {
+	hasDisplayedKeyboardTooltip = false;
+};
 
 /**
  * @fires d2l-list-item-drag-handle-action - Dispatched when an action performed on the drag handle
@@ -61,6 +64,10 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(LitElement)) {
 			 * @type {string}
 			 */
 			text: { type: String },
+			/**
+			 * When layout = tile, the drag handle become horizontal
+			 */
+			layout: { type: String },
 			_displayKeyboardTooltip: { type: Boolean },
 			_keyboardActive: { type: Boolean }
 		};
@@ -117,6 +124,12 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(LitElement)) {
 			d2l-button-move {
 				pointer-events: auto; /* required since ancestors may set point-events: none; (see generic layout) */
 			}
+
+			:host([layout="tile"]) {
+				align-items: center;
+				display: flex;
+				height: 39px;
+			}
 		`];
 	}
 
@@ -152,7 +165,9 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(LitElement)) {
 	get _defaultLabel() {
 		const namespace = 'components.list-item-drag-handle';
 		const defaultLabel = this.localize(`${namespace}.${'default'}`, 'name', this.text);
-		const keyboardTextLabel = this.localize(`${namespace}.${'keyboard'}`, 'currentPosition', this.keyboardTextInfo && this.keyboardTextInfo.currentPosition, 'size', this.keyboardTextInfo && this.keyboardTextInfo.count);
+		const keyboardTextLabel = this.layout !== 'tile'
+			? this.localize(`${namespace}.${'keyboard'}`, 'currentPosition', this.keyboardTextInfo && this.keyboardTextInfo.currentPosition, 'size', this.keyboardTextInfo && this.keyboardTextInfo.count)
+			: this.localize(`${namespace}.${'side-to-side.keyboard'}`, 'currentPosition', this.keyboardTextInfo && this.keyboardTextInfo.currentPosition, 'size', this.keyboardTextInfo && this.keyboardTextInfo.count);
 		return this._keyboardActive ? keyboardTextLabel : defaultLabel;
 	}
 
@@ -182,6 +197,20 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(LitElement)) {
 
 		const isRtl = document.documentElement.getAttribute('dir') === 'rtl';
 
+		if (this.layout === 'tile') {
+			if (!isRtl) {
+				if (e.detail.action === moveActions.right)
+					e.detail.action = moveActions.down;
+				if (e.detail.action === moveActions.left)
+					e.detail.action = moveActions.up;
+			} else {
+				if (e.detail.action === moveActions.right)
+					e.detail.action = moveActions.up;
+				if (e.detail.action === moveActions.left)
+					e.detail.action = moveActions.down;
+			}
+		}
+
 		let action = null;
 		switch (e.detail.action) {
 			case moveActions.up:
@@ -299,19 +328,25 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(LitElement)) {
 				id="${this._buttonId}"
 				@keydown="${this._onMoveButtonKeydown}"
 				@mousedown="${this._onMoveButtonMouseDown}"
-				text="${this._defaultLabel}">
+				text="${this._defaultLabel}"
+				?side-to-side="${this.layout === 'tile'}">
 			</d2l-button-move>
 			${this._displayKeyboardTooltip ? html`<d2l-tooltip class="vdiff-target" align="start" announced for="${this._buttonId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}
 		`;
 	}
 
 	_renderTooltipContent() {
+		const namespace = 'components.list-item-drag-handle-tooltip';
+		const controlNamespace = this.layout === 'tile'
+			? `${namespace}.side-to-side`
+			: namespace;
+
 		return html`
-			<div>${this.localize('components.list-item-drag-handle-tooltip.title')}</div>
+			<div>${this.localize(`${namespace}.title`)}</div>
 			<ul>
-				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.enter-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.enter-desc')}</li>
-				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.up-down-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.up-down-desc')}</li>
-				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.left-right-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.left-right-desc')}</li>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize(`${namespace}.enter-key`)}</span> - ${this.localize(`${namespace}.enter-desc`)}</li>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize(`${namespace}.up-down-key`)}</span> - ${this.localize(`${controlNamespace}.up-down-desc`)}</li>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize(`${namespace}.left-right-key`)}</span> - ${this.localize(`${controlNamespace}.left-right-desc`)}</li>
 			</ul>
 		`;
 	}

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

@@ -65,8 +65,7 @@ class ListItemGenericLayout extends LitElement {
 			/**
 			 * @ignore
 			 */
-			layout: { type: String, reflect: true }
-
+			layout: { type: String, reflect: true },
 		};
 	}
 
@@ -216,7 +215,21 @@ class ListItemGenericLayout extends LitElement {
 
 			:host([layout="tile"]) {
 				grid-template-columns:
-					[start control-start] minmax(0, min-content)
+					[start outside-control-start] minmax(0, 26px)
+					[outside-control-end control-start] minmax(0, min-content)
+					[control-end actions-start] minmax(0, auto)
+					[actions-end end];
+				grid-template-rows:
+					[start header-start] minmax(0, min-content)
+					[header-end content-start] auto
+					[content-end end];
+				height: 100%;
+			}
+
+			:host([layout="tile"]:not([is-draggable])) {
+				grid-template-columns:
+					[start outside-control-start] 0
+					[outside-control-end control-start] minmax(0, min-content)
 					[control-end actions-start] minmax(0, auto)
 					[actions-end end];
 				grid-template-rows:
@@ -258,14 +271,22 @@ class ListItemGenericLayout extends LitElement {
 				grid-row: content-start / content-end;
 			}
 
+			:host([layout="tile"]) ::slotted([slot="outside-control"]) {
+				grid-column: outside-control-start / outside-control-end;
+				grid-row: start / start;
+				width: min-content;
+			}
+
+			:host([layout="tile"]) ::slotted([slot="outside-control-action"]) {
+				grid-column: start / end;
+				grid-row: start / start;
+			}
+
 			:host(:not([layout="tile"])) slot[name="header"],
 			:host([layout="tile"]) slot[name="add-top"],
 			:host([layout="tile"]) slot[name="control-container"],
 			:host([layout="tile"]) slot[name="before-content"],
-			:host([layout="tile"]) slot[name="outside-control"],
-			:host([layout="tile"]) slot[name="outside-control-action"],
 			:host([layout="tile"]) slot[name="expand-collapse"],
-			:host([layout="tile"]) slot[name="drop-target"],
 			:host([layout="tile"]) slot[name="nested"],
 			:host([layout="tile"]) slot[name="add"] {
 				display: none;

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

@@ -35,6 +35,10 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 			:host([action-href]:not([action-href=""])) [slot="outside-control-action"] {
 				grid-column-end: control-end;
 			}
+
+			:host([action-href]:not([action-href=""])[layout="tile"]) [slot="outside-control-action"] {
+				grid-column-end: end;
+			}
 		` ];
 
 		super.styles && styles.unshift(super.styles);

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

@@ -163,6 +163,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				background: white;
 			}
 
+			:host([dragging][layout="tile"]) d2l-list-item-generic-layout {
+				filter: grayscale(75%);
+				opacity: 0.4;
+			}
+
 			[slot="control-container"] {
 				pointer-events: none;
 				position: relative;
@@ -333,6 +338,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin: 0.25rem 0.3rem;
 			}
 
+			:host([layout="tile"]) d2l-list-item-drag-handle {
+				margin-block: 0;
+				margin-inline: 0.3rem 0;
+			}
+
 			[slot="outside-control-container"] {
 				border: 1px solid transparent;
 				border-radius: 6px;
@@ -474,6 +484,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				transform: translateY(-10px);
 				transition: opacity 200ms ease-out, transform 0ms ease-out 300ms;
 			}
+
 			:host([layout="tile"][_selection-when-interacted]) [slot="control"]:hover,
 			:host([layout="tile"][_selection-when-interacted][_focusing]) [slot="control"],
 			:host([layout="tile"][_selection-when-interacted][_force-show-selection]) [slot="control"],
@@ -484,6 +495,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				transition: opacity 200ms ease-out, transform 200ms ease-out;
 			}
 
+			:host([layout="tile"][draggable][tile-header]) [slot="control"] {
+				margin: 0.25rem 0;
+			}
+
 			@media (prefers-reduced-motion: reduce) {
 				:host([layout="tile"][_selection-when-interacted]) [slot="control"] {
 					transform: none;
@@ -587,6 +602,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host([layout="tile"]) d2l-selection-input {
 				margin: 0;
 			}
+
+			:host([layout="tile"][draggable]) d2l-selection-input {
+				margin: auto;
+				margin-inline-start: 0.3rem;
+			}
 			:host([layout="tile"]:not([tile-header])) 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);
@@ -724,6 +744,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			this._hasListItemContent = !!this.shadowRoot.querySelector('slot:not([name])').assignedElements({ flatten: true })
 				.find(elem => elem.tagName === 'D2L-LIST-ITEM-CONTENT');
 		}
+		if (this.draggable) {
+			this.tileHeader = true;
+		}
 	}
 
 	focus() {
@@ -975,6 +998,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				data-separators="${ifDefined(this._separators)}"
 				indentation="${ifDefined(this.indentation)}"
 				?grid-active="${this.role === 'row'}"
+				?selectable="${this.selectable}"
+				?is-draggable="${this.draggable}"
 				layout="${this.layout}"
 				?no-primary-action="${this.noPrimaryAction}">
 				${this._showAddButton && this.first ? html`
@@ -1038,10 +1063,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			</d2l-list-item-generic-layout>
 		`;
 
+		const isDraggableTile = this.draggable && this.layout === 'tile';
+
 		return html`
-			${this._renderTopPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
+			${this._renderTopPlacementMarker(html`<d2l-list-item-placement-marker ?vertical="${isDraggableTile}"></d2l-list-item-placement-marker>`)}
 			${this.draggable ? html`<div class="d2l-list-item-drag-image">${innerView}</div>` : innerView}
-			${this._renderBottomPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
+			${this._renderBottomPlacementMarker(html`<d2l-list-item-placement-marker ?vertical="${isDraggableTile}"></d2l-list-item-placement-marker>`)}
 			${this._displayKeyboardTooltip && tooltipForId ? html`<d2l-tooltip align="start" announced for="${tooltipForId}" for-type="descriptor">${this.localizeHTML('components.list.keyboard')}</d2l-tooltip>` : ''}
 			${this.draggable ? this._renderDragMultipleImage() : nothing}
 		`;

package/components/list/list-item-placement-marker.js

@@ -3,25 +3,44 @@ import { css, html, LitElement } from 'lit';
 
 class ListItemPlacementMarker extends LitElement {
 
+	static properties = {
+		vertical: { type: Boolean, reflect: true }
+	};
+
 	static get styles() {
 		return css`
 			:host {
 				display: block;
 			}
 
+			:host([vertical]) {
+				height: 100%;
+			}
+
 			:host([hidden]) {
 				display: none;
 			}
 
+			:host([vertical]) .d2l-list-drag-marker-line {
+				height: 100%;
+				margin: -1px 0;
+				width: 12px;
+			}
+
 			.d2l-list-drag-marker-line {
 				height: 12px;
-				margin-left: -1px;
-				margin-right: -1px;
+				margin-inline: -1px;
 				stroke: var(--d2l-color-celestine);
 				stroke-width: 3px;
 				width: 100%;
 			}
 
+			:host([vertical]) .d2l-list-drag-marker-linecap {
+				height: 4px;
+				margin-inline: 0 -2px;
+				width: 12px;
+			}
+
 			.d2l-list-drag-marker-linecap {
 				fill: var(--d2l-color-celestine);
 				height: 12px;
@@ -30,6 +49,11 @@ class ListItemPlacementMarker extends LitElement {
 				width: 4px;
 			}
 
+			:host([vertical]) .d2l-list-drag-marker-circle {
+				margin-inline: 0 0;
+			}
+
+
 			.d2l-list-drag-marker-circle {
 				fill: none;
 				height: 12px;
@@ -43,10 +67,37 @@ class ListItemPlacementMarker extends LitElement {
 				display: flex;
 				flex-wrap: nowrap;
 			}
+
+			:host([vertical]) .d2l-list-drag-marker {
+				flex-direction: column;
+				height: 100%;
+			}
 		`;
 	}
 
+	constructor() {
+		super();
+		this.vertical = false;
+	}
+
 	render() {
+
+		if (this.vertical) {
+			return html`
+			<div class="d2l-list-drag-marker">
+				<svg class="d2l-list-drag-marker-circle">
+					<circle cx="50%" cy="50%" r="3.8px"/>
+				</svg>
+				<svg class="d2l-list-drag-marker-line">
+					<line x1="50%" y1="0" x2="50%" y2="100%" />
+				</svg>
+				<svg class="d2l-list-drag-marker-linecap">
+					<circle cx="50%" cy="50%" r="1.5px"/>
+				</svg>
+			</div>
+		`;
+		}
+
 		return html`
 			<div class="d2l-list-drag-marker">
 				<svg class="d2l-list-drag-marker-circle">