@brightspace-ui/core 3.321.3 → 3.323.0

package/components/state/state-illustrated.js

@@ -0,0 +1,129 @@
+import { html, LitElement, nothing } from 'lit';
+import { stateIllustratedStyles, stateStyles } from './state-styles.js';
+import { bodyCompactStyles } from '../typography/styles.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
+import { loadSvg } from '../../generated/state/presetIllustrationLoader.js';
+import { runAsync } from '../../directives/run-async/run-async.js';
+import { StateMixin } from './state-mixin.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+
+const illustrationAspectRatio = 500 / 330;
+
+/**
+ * The `d2l-state-illustrated` component is an state component that displays a title and description with an illustration. An state action component can be placed inside of the default slot to add an optional action.
+ * @slot - Slot for state actions
+ * @slot illustration - Slot for custom SVG content if `illustration-name` property is not set
+ */
+export class StateIllustrated extends LoadingCompleteMixin(StateMixin(LitElement)) { // Exported to support old empty-state components, once they are removed this can be made internal only
+
+	static properties = {
+		/**
+		 * REQUIRED: A description giving details about the state
+		 * @type {string}
+		 */
+		description: { type: String, required: true },
+		/**
+		 * The name of the preset image you would like to display in the component
+		 * @type {string}
+		 */
+		illustrationName: { type: String, attribute: 'illustration-name' },
+		/**
+		 * REQUIRED: A title for the state
+		 * @type {string}
+		 */
+		titleText: { type: String, attribute: 'title-text', required: true },
+		_contentHeight: { state: true },
+		_titleSmall: { state: true }
+	};
+
+	static styles = [bodyCompactStyles, stateStyles, stateIllustratedStyles];
+
+	constructor() {
+		super();
+		this._contentHeight = 330;
+		this._resizeObserver = new ResizeObserver(this._onResize.bind(this));
+		this._titleSmall = false;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener('d2l-state-illustrated-check', this.#handleStateIllustratedCheck);
+		this._resizeObserver.observe(this);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener('d2l-state-illustrated-check', this.#handleStateIllustratedCheck);
+		this._resizeObserver.disconnect();
+	}
+
+	render() {
+		const titleClass = {
+			'd2l-state-title': true,
+			'd2l-state-title-small': this._titleSmall,
+			'd2l-state-title-large': !this._titleSmall,
+		};
+
+		return html`
+			${this.#renderIllustration()}
+			<p class="${classMap(titleClass)}">${this.titleText}</p>
+			<p class="d2l-body-compact d2l-state-description" tabindex="-1">${this.description}</p>
+			<slot class="action-slot"></slot>
+		`;
+	}
+
+	_onResize(entries) {
+		if (!entries || entries.length === 0) return;
+		const entry = entries[0];
+
+		const width = entry.contentRect.width;
+		if (width === 0) return; // ignore until visible
+
+		requestAnimationFrame(() => {
+			this._contentHeight = Math.min(entry.contentRect.right / illustrationAspectRatio, 330);
+			this._titleSmall = entry.contentRect.right <= 615;
+		});
+	}
+
+	async #getIllustration(illustrationName) {
+		if (!illustrationName) return;
+
+		const svg = await loadSvg(illustrationName);
+		if (!svg) setTimeout(() => {
+			throw new Error(`<d2l-state-illustrated-${this._illustratedComponentType}>: Unable to retrieve requested illustration.`);
+		});
+		return svg ? html`${unsafeSVG(svg.val)}` : nothing;
+	}
+
+	#handleStateIllustratedCheck(e) {
+		e.stopPropagation();
+		e.detail.illustrated = true;
+	}
+
+	#renderIllustration() {
+		if (!this.illustrationName) {
+			this.resolveLoadingComplete();
+			return html`<slot class="illustration-slot" name="illustration"></slot>`;
+		}
+		const illustrationContainerStyle = {
+			height: `${this._contentHeight}px`,
+		};
+		const asyncVal = runAsync(
+			this.illustrationName,
+			() => this.#getIllustration(this.illustrationName),
+			{
+				success: illustration => {
+					this.resolveLoadingComplete();
+					return illustration;
+				}
+			},
+			{ pendingState: false }
+		);
+		return html`<div style="${styleMap(illustrationContainerStyle)}">${asyncVal}</div>`;
+	}
+
+}
+
+customElements.define('d2l-state-illustrated', StateIllustrated);

package/components/{empty-state/empty-state-mixin.js → state/state-mixin.js}

@@ -1,19 +1,19 @@
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 
-export const EmptyStateMixin = superclass => class extends PropertyRequiredMixin(superclass) {
+export const StateMixin = superclass => class extends PropertyRequiredMixin(superclass) {
 
 	focus() {
 		if (!this.hasUpdated) {
 			return;
 		}
 		const action = this.shadowRoot?.querySelector('.action-slot').assignedElements().find(
-			el => el.tagName === 'D2L-EMPTY-STATE-ACTION-BUTTON' || el.tagName === 'D2L-EMPTY-STATE-ACTION-LINK'
+			el => el.isStateActionButton || el.isStateActionLink
 		);
 		if (action !== undefined) {
 			action.focus();
 			return;
 		}
-		const title = this.shadowRoot?.querySelector('.d2l-empty-state-description');
+		const title = this.shadowRoot?.querySelector('.d2l-state-description');
 		if (title !== null) {
 			title.focus();
 		}

package/components/state/state-styles.js

@@ -0,0 +1,96 @@
+import '../colors/colors.js';
+import { css } from 'lit';
+import { getFocusRingStyles } from '../../helpers/focus.js';
+
+export const stateStyles = css`
+
+	:host {
+		display: block;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	.action-slot::slotted(*) {
+		display: none;
+	}
+
+	.action-slot::slotted(d2l-state-action-button:first-of-type),
+	.action-slot::slotted(d2l-state-action-link:first-of-type) {
+		display: inline;
+	}
+	.d2l-state-description {
+		--d2l-focus-ring-offset: 3px;
+		border-radius: 0.3rem;
+	}
+	${getFocusRingStyles('.d2l-state-description')}
+`;
+
+export const stateSimpleStyles = css`
+
+	:host {
+		border: 1px solid var(--d2l-color-mica);
+		border-radius: 0.3rem;
+		padding: 1.2rem 1.5rem;
+	}
+
+	:host([description]) .state-container {
+		align-items: center;
+		column-gap: 0.75rem;
+		display: flex;
+		flex-wrap: wrap;
+		padding-inline-start: 0;
+	}
+
+	.d2l-state-description {
+		margin: 0;
+	}
+
+`;
+
+export const stateIllustratedStyles = css`
+
+	:host {
+		text-align: center;
+	}
+
+	.illustration-slot::slotted(*) {
+		display: none;
+	}
+
+	.illustration-slot::slotted(img:first-of-type),
+	.illustration-slot::slotted(svg:first-of-type) {
+		display: inline-block;
+	}
+
+	svg {
+		height: 100%;
+		max-width: 500px;
+		width: 100%;
+	}
+
+	.d2l-state-title {
+		margin-bottom: 0.9rem;
+	}
+
+	.d2l-state-title-large {
+		font-size: 1.5rem;
+		line-height: 1.8rem;
+		margin: 1rem 0 1.5rem 0;
+	}
+
+	.d2l-state-title-small {
+		font-size: 1rem;
+		font-weight: 700;
+		line-height: 1.5rem;
+		margin-top: 0.5rem;
+	}
+
+	.d2l-state-description {
+		margin: 0 auto 0.8rem;
+		max-width: 500px;
+		width: 100%;
+	}
+
+`;

package/custom-elements.json

@@ -4511,7 +4511,6 @@
     {
       "name": "d2l-empty-state-action-button",
       "path": "./components/empty-state/empty-state-action-button.js",
-      "description": "`d2l-empty-state-action-button` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a button action to the component.",
       "attributes": [
         {
           "name": "text",
@@ -4520,7 +4519,7 @@
         },
         {
           "name": "primary",
-          "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-empty-state-action-button` is placed within `d2l-empty-state-illustrated` components",
+          "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-state-action-button` is placed within `d2l-state-illustrated` components",
           "type": "boolean"
         }
       ],
@@ -4534,21 +4533,28 @@
         {
           "name": "primary",
           "attribute": "primary",
-          "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-empty-state-action-button` is placed within `d2l-empty-state-illustrated` components",
+          "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-state-action-button` is placed within `d2l-state-illustrated` components",
           "type": "boolean"
         },
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t.d2l-empty-state-action {\\n\\t\\t\\tvertical-align: top;\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t.d2l-state-action {\\n\\t\\t\\tvertical-align: top;\\n\\t\\t}\\n\\t`\""
+        },
+        {
+          "name": "isStateActionButton",
+          "type": "boolean"
         }
       ],
       "events": [
         {
-          "name": "d2l-empty-state-action",
+          "name": "d2l-empty-state-action"
+        },
+        {
+          "name": "d2l-state-action",
           "description": "Dispatched when the action button is clicked"
         },
         {
-          "name": "d2l-empty-state-illustrated-check",
+          "name": "d2l-state-illustrated-check",
           "description": "Internal event"
         }
       ]
@@ -4556,11 +4562,10 @@
     {
       "name": "d2l-empty-state-action-link",
       "path": "./components/empty-state/empty-state-action-link.js",
-      "description": "`d2l-empty-state-action-link` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a link action to the component.",
       "attributes": [
         {
           "name": "text",
-          "description": "REQUIRED: The action text to be used in the subtle button",
+          "description": "REQUIRED: The action text to be used in the link",
           "type": "string"
         },
         {
@@ -4583,9 +4588,13 @@
         {
           "name": "text",
           "attribute": "text",
-          "description": "REQUIRED: The action text to be used in the subtle button",
+          "description": "REQUIRED: The action text to be used in the link",
           "type": "string"
         },
+        {
+          "name": "isStateActionLink",
+          "type": "boolean"
+        },
         {
           "name": "download",
           "attribute": "download",
@@ -4614,11 +4623,10 @@
     {
       "name": "d2l-empty-state-illustrated",
       "path": "./components/empty-state/empty-state-illustrated.js",
-      "description": "The `d2l-empty-state-illustrated` component is an empty state component that displays a title and description with an illustration. An empty state action component can be placed inside of the default slot to add an optional action.",
       "attributes": [
         {
           "name": "description",
-          "description": "REQUIRED: A description giving details about the empty state",
+          "description": "REQUIRED: A description giving details about the state",
           "type": "string"
         },
         {
@@ -4628,7 +4636,7 @@
         },
         {
           "name": "title-text",
-          "description": "REQUIRED: A title for the empty state",
+          "description": "REQUIRED: A title for the state",
           "type": "string"
         }
       ],
@@ -4636,7 +4644,7 @@
         {
           "name": "description",
           "attribute": "description",
-          "description": "REQUIRED: A description giving details about the empty state",
+          "description": "REQUIRED: A description giving details about the state",
           "type": "string"
         },
         {
@@ -4648,13 +4656,13 @@
         {
           "name": "titleText",
           "attribute": "title-text",
-          "description": "REQUIRED: A title for the empty state",
+          "description": "REQUIRED: A title for the state",
           "type": "string"
         },
         {
           "name": "styles",
           "type": "array",
-          "default": "[\"bodyCompactStyles\",\"emptyStateStyles\",\"emptyStateIllustratedStyles\"]"
+          "default": "[\"styles\",\"emptyStateStyles\"]"
         },
         {
           "name": "loadingComplete",
@@ -4668,7 +4676,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Slot for empty state actions"
+          "description": "Slot for state actions"
         },
         {
           "name": "illustration",
@@ -4697,7 +4705,7 @@
         {
           "name": "styles",
           "type": "array",
-          "default": "[\"bodyCompactStyles\",\"emptyStateStyles\",\"emptyStateSimpleStyles\"]"
+          "default": "[\"bodyCompactStyles\",\"stateStyles\",\"stateSimpleStyles\",\"emptyStateStyles\"]"
         }
       ],
       "slots": [
@@ -15867,6 +15875,182 @@
         }
       ]
     },
+    {
+      "name": "d2l-state-action-button",
+      "path": "./components/state/state-action-button.js",
+      "description": "`d2l-state-action-button` is an state action component that can be placed inside of the default slot of state components to add a button action.",
+      "attributes": [
+        {
+          "name": "text",
+          "description": "REQUIRED: The action text to be used in the button",
+          "type": "string"
+        },
+        {
+          "name": "primary",
+          "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-state-action-button` is placed within `d2l-state-illustrated` components",
+          "type": "boolean"
+        }
+      ],
+      "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: The action text to be used in the button",
+          "type": "string"
+        },
+        {
+          "name": "primary",
+          "attribute": "primary",
+          "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-state-action-button` is placed within `d2l-state-illustrated` components",
+          "type": "boolean"
+        },
+        {
+          "name": "styles",
+          "default": "\"css`\\n\\t\\t.d2l-state-action {\\n\\t\\t\\tvertical-align: top;\\n\\t\\t}\\n\\t`\""
+        },
+        {
+          "name": "isStateActionButton",
+          "type": "boolean"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-state-action",
+          "description": "Dispatched when the action button is clicked"
+        },
+        {
+          "name": "d2l-state-illustrated-check",
+          "description": "Internal event"
+        }
+      ]
+    },
+    {
+      "name": "d2l-state-action-link",
+      "path": "./components/state/state-action-link.js",
+      "description": "`d2l-state-action-link` is an state action component that can be placed inside of the default slot of state components to add a link action.",
+      "attributes": [
+        {
+          "name": "text",
+          "description": "REQUIRED: The action text to be used in the link",
+          "type": "string"
+        },
+        {
+          "name": "download",
+          "description": "Prompts the user to save the linked URL instead of navigating to it.\nMust be to a resource on the same origin.\nCan be used with or without a value, when set the value becomes the filename.",
+          "type": "string"
+        },
+        {
+          "name": "href",
+          "description": "REQUIRED: The action URL or URL fragment of the link",
+          "type": "string"
+        },
+        {
+          "name": "target",
+          "description": "Where to display the linked URL",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: The action text to be used in the link",
+          "type": "string"
+        },
+        {
+          "name": "isStateActionLink",
+          "type": "boolean"
+        },
+        {
+          "name": "download",
+          "attribute": "download",
+          "description": "Prompts the user to save the linked URL instead of navigating to it.\nMust be to a resource on the same origin.\nCan be used with or without a value, when set the value becomes the filename.",
+          "type": "string"
+        },
+        {
+          "name": "href",
+          "attribute": "href",
+          "description": "REQUIRED: The action URL or URL fragment of the link",
+          "type": "string"
+        },
+        {
+          "name": "target",
+          "attribute": "target",
+          "description": "Where to display the linked URL",
+          "type": "string"
+        },
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[\"styles\",\"bodyCompactStyles\",\"linkStyles\"]"
+        }
+      ]
+    },
+    {
+      "name": "d2l-state-illustrated",
+      "path": "./components/state/state-illustrated.js",
+      "description": "The `d2l-state-illustrated` component is an state component that displays a title and description with an illustration. An state action component can be placed inside of the default slot to add an optional action.",
+      "attributes": [
+        {
+          "name": "description",
+          "description": "REQUIRED: A description giving details about the state",
+          "type": "string"
+        },
+        {
+          "name": "illustration-name",
+          "description": "The name of the preset image you would like to display in the component",
+          "type": "string"
+        },
+        {
+          "name": "title-text",
+          "description": "REQUIRED: A title for the state",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "REQUIRED: A description giving details about the state",
+          "type": "string"
+        },
+        {
+          "name": "illustrationName",
+          "attribute": "illustration-name",
+          "description": "The name of the preset image you would like to display in the component",
+          "type": "string"
+        },
+        {
+          "name": "titleText",
+          "attribute": "title-text",
+          "description": "REQUIRED: A title for the state",
+          "type": "string"
+        },
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[\"bodyCompactStyles\",\"stateStyles\",\"stateIllustratedStyles\"]"
+        },
+        {
+          "name": "loadingComplete",
+          "type": "Promise<any>"
+        },
+        {
+          "name": "resolveLoadingComplete",
+          "type": "() => void"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Slot for state actions"
+        },
+        {
+          "name": "illustration",
+          "description": "Slot for custom SVG content if `illustration-name` property is not set"
+        }
+      ]
+    },
     {
       "name": "d2l-status-indicator",
       "path": "./components/status-indicator/status-indicator.js",
@@ -17855,7 +18039,7 @@
         },
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host,\\n\\t\\t:host > d2l-form {\\n\\t\\t\\tbottom: 0;\\n\\t\\t\\tleft: 0;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\tright: 0;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t:host([hidden]) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t:host([width-type=\\\"normal\\\"]) .d2l-template-primary-secondary-content,\\n\\t\\t:host([width-type=\\\"normal\\\"]) .d2l-template-primary-secondary-footer {\\n\\t\\t\\tmargin: 0 auto;\\n\\t\\t\\tmax-width: 1230px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-container {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex-direction: column;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 2 0 0;\\n\\t\\t\\toverflow-x: hidden;\\n\\t\\t\\ttransition: none;\\n\\t\\t}\\n\\t\\tmain d2l-form-error-summary {\\n\\t\\t\\tmargin-inline: var(--d2l-template-primary-secondary-form-error-inline-margin, 20px);\\n\\t\\t}\\n\\n\\t\\t:host([resizable]) main {\\n\\t\\t\\tflex: 1 0 0;\\n\\t\\t}\\n\\t\\t:host([primary-overflow=\\\"hidden\\\"]) main {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tflex: 1 0 0;\\n\\t\\t\\tmin-width: ${desktopMinSize}px;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tflex: none;\\n\\t\\t\\tmin-width: 0;\\n\\t\\t}\\n\\t\\t[data-animate-resize] .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1), height 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-shadow {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\taside {\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tmin-width: ${desktopMinSize}px;\\n\\t\\t\\toverflow-x: hidden;\\n\\t\\t\\toverflow-y: scroll;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\n\\t\\t/* prevent margin colapse on slotted children */\\n\\t\\taside::before,\\n\\t\\taside::after {\\n\\t\\t\\tcontent: \\\" \\\";\\n\\t\\t\\tdisplay: table;\\n\\t\\t}\\n\\t\\t[data-background-shading=\\\"primary\\\"] > main,\\n\\t\\t[data-background-shading=\\\"secondary\\\"] > .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-collapsed] aside {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t:host([resizable]:not([secondary-first])) aside {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t.d2l-template-primary-secondary-divider-not-resizable {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tflex: none;\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\twidth: 1px;\\n\\t\\t\\tz-index: 1;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: calc(50%);\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\twidth: 0.45rem;\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-expanded] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-end, e-resize);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-collapsed] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-start, w-resize);\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-background-shading=\\\"secondary\\\"] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbox-shadow: calc(1px * var(--d2l-length-factor, 1)) 0 0 0 rgba(0, 0, 0, 0.15);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-background-shading=\\\"primary\\\"] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbox-shadow: calc(-1px * var(--d2l-length-factor, 1)) 0 0 0 rgba(0, 0, 0, 0.15);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-desktop {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\tposition: absolute;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-left,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-left {\\n\\t\\t\\tinset-inline-start: -1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tinset-inline-end: -1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 0.9rem;\\n\\t\\t\\tjustify-content: space-between;\\n\\t\\t\\twidth: 0.25rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: var(--d2l-color-galena);\\n\\t\\t\\tborder-radius: 0.05rem;\\n\\t\\t\\tcontent: \\\"\\\";\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\twidth: 0.1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-right,\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-left {\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\t\\t:host(:not([secondary-first])) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-left,\\n\\t\\t:host([secondary-first]) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\td2l-icon {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\n\\t\\tfooter {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tpadding: 0.75rem 1rem;\\n\\t\\t\\tz-index: 1; /* ensures the footer box-shadow is over main areas with background colours set */\\n\\t\\t}\\n\\t\\theader {\\n\\t\\t\\tz-index: 14; /* ensures the header box-shadow is over main areas with background colours set, and opt-in on top of sticky header */\\n\\t\\t}\\n\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:focus,\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tbox-shadow: none;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-line::after,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: var(--d2l-color-ferrite);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\ttransition: background-color 100ms, box-shadow 100ms;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:hover,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\ttransition-delay: 100ms;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar {\\n\\t\\t\\twidth: 8px;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-track {\\n\\t\\t\\tbackground: rgba(255, 255, 255, 0.4);\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-thumb {\\n\\t\\t\\tbackground: var(--d2l-color-galena);\\n\\t\\t\\tborder-radius: 4px;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-thumb:hover {\\n\\t\\t\\tbackground: var(--d2l-color-tungsten);\\n\\t\\t}\\n\\n\\t\\t/* For Firefox */\\n\\t\\t.d2l-template-scroll {\\n\\t\\t\\tscrollbar-color: var(--d2l-color-galena) rgba(255, 255, 255, 0.4);\\n\\t\\t\\tscrollbar-width: thin;\\n\\t\\t}\\n\\n\\t\\t@media (prefers-reduced-motion: reduce) {\\n\\t\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-line::after,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\ttransition: none;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media only screen and (max-width: 767px) {\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\tflex-direction: column;\\n\\t\\t\\t}\\n\\n\\t\\t\\tmain {\\n\\t\\t\\t\\tflex: 1 0 0;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tflex: none;\\n\\t\\t\\t}\\n\\t\\t\\taside,\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tmin-width: auto;\\n\\t\\t\\t}\\n\\t\\t\\t[data-is-collapsed] aside {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-desktop {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\t\\t\\t/* Attribute selector is only used to increase specificity */\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\t\\tcursor: ns-resize;\\n\\t\\t\\t\\theight: 0.1rem;\\n\\t\\t\\t\\twidth: 100%;\\n\\t\\t\\t}\\n\\t\\t\\t:host([resizable]) [data-is-collapsed] .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) [data-is-collapsed] .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tcursor: n-resize;\\n\\t\\t\\t}\\n\\t\\t\\t:host([resizable]) [data-is-expanded] .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) [data-is-expanded] .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tcursor: s-resize;\\n\\t\\t\\t}\\n\\n\\t\\t\\t/* Attribute selector is only used to increase specificity */\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:hover,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider:hover,\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:focus,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider:focus {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\t\\tborder-radius: 0;\\n\\t\\t\\t\\tbottom: 0.1rem;\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t\\tinset-inline-end: calc(17px + 0.2rem);\\n\\t\\t\\t\\toverflow: hidden;\\n\\t\\t\\t\\ttop: auto;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\talign-items: center;\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\t\\tborder-radius: 0.25rem 0.25rem 0 0;\\n\\t\\t\\t\\tbottom: 0;\\n\\t\\t\\t\\tdisplay: flex;\\n\\t\\t\\t\\tjustify-content: center;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\tright: 0;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\theight: 1rem;\\n\\t\\t\\t\\twidth: 2.2rem;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\t\\tbox-shadow: none;\\n\\t\\t\\t\\theight: 1.2rem;\\n\\t\\t\\t\\tinset-inline-end: 17px;\\n\\t\\t\\t\\twidth: 2.6rem;\\n\\t\\t\\t}\\n\\t\\t\\td2l-icon {\\n\\t\\t\\t\\tcolor: white;\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t}\\n\\t\\t\\t${getFocusRingStyles(pseudoClass => `.d2l-template-primary-secondary-divider:${pseudoClass} .d2l-template-primary-secondary-divider-handle-mobile`, { extraStyles: css`right: 0.2rem; box-shadow: 0 0 0 2px #ffffff;` })}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-shadow {\\n\\t\\t\\t\\tbox-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t\\theight: 100%;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\twidth: 100%;\\n\\t\\t\\t\\tz-index: -1;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t@media print {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\toverflow: visible;\\n\\t\\t\\t\\tposition: relative;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\tflex-direction: column;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content,\\n\\t\\t\\t.d2l-template-primary-secondary-content > main,\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\toverflow: visible;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content > main {\\n\\t\\t\\t\\tbackground: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-divider-not-resizable,\\n\\t\\t\\t.d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-container > footer {\\n\\t\\t\\t\\tbox-shadow: none;\\n\\t\\t\\t\\tpadding: 0;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-container,\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\theight: auto;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host,\\n\\t\\t:host > d2l-form {\\n\\t\\t\\tbottom: 0;\\n\\t\\t\\tleft: 0;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\tright: 0;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t:host([hidden]) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t:host([width-type=\\\"normal\\\"]) .d2l-template-primary-secondary-content,\\n\\t\\t:host([width-type=\\\"normal\\\"]) .d2l-template-primary-secondary-footer {\\n\\t\\t\\tmargin: 0 auto;\\n\\t\\t\\tmax-width: 1230px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-container {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex-direction: column;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 2 0 0;\\n\\t\\t\\toverflow-x: hidden;\\n\\t\\t\\ttransition: none;\\n\\t\\t}\\n\\t\\tmain d2l-form-error-summary {\\n\\t\\t\\tmargin-inline: var(--d2l-template-primary-secondary-form-error-inline-margin, 20px);\\n\\t\\t}\\n\\n\\t\\t:host([resizable]) main {\\n\\t\\t\\tflex: 1 0 0;\\n\\t\\t}\\n\\t\\t:host([primary-overflow=\\\"hidden\\\"]) main {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tflex: 1 0 0;\\n\\t\\t\\tmin-width: ${desktopMinSize}px;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tflex: none;\\n\\t\\t\\tmin-width: 0;\\n\\t\\t}\\n\\t\\t[data-animate-resize] .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1), height 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-shadow {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\taside {\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tmin-width: ${desktopMinSize}px;\\n\\t\\t\\toverflow-x: hidden;\\n\\t\\t\\toverflow-y: scroll;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\n\\t\\t/* prevent margin colapse on slotted children */\\n\\t\\taside::before,\\n\\t\\taside::after {\\n\\t\\t\\tcontent: \\\" \\\";\\n\\t\\t\\tdisplay: table;\\n\\t\\t}\\n\\t\\t[data-background-shading=\\\"primary\\\"] > main,\\n\\t\\t[data-background-shading=\\\"secondary\\\"] > .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-collapsed] aside {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t:host([resizable]:not([secondary-first])) aside {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t.d2l-template-primary-secondary-divider-not-resizable {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tflex: none;\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\twidth: 1px;\\n\\t\\t\\tz-index: 1;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: calc(50%);\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\twidth: 0.45rem;\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-expanded] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-end, e-resize);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-is-collapsed] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-start, w-resize);\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-background-shading=\\\"secondary\\\"] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbox-shadow: calc(1px * var(--d2l-length-factor, 1)) 0 0 0 rgba(0, 0, 0, 0.15);\\n\\t\\t}\\n\\t\\t:host([resizable]) [data-background-shading=\\\"primary\\\"] .d2l-template-primary-secondary-divider {\\n\\t\\t\\tbox-shadow: calc(-1px * var(--d2l-length-factor, 1)) 0 0 0 rgba(0, 0, 0, 0.15);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-desktop {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\tposition: absolute;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-left,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-left {\\n\\t\\t\\tinset-inline-start: -1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tinset-inline-end: -1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 0.9rem;\\n\\t\\t\\tjustify-content: space-between;\\n\\t\\t\\twidth: 0.25rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: var(--d2l-color-galena);\\n\\t\\t\\tborder-radius: 0.05rem;\\n\\t\\t\\tcontent: \\\"\\\";\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\twidth: 0.1rem;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-right,\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-left {\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\t\\t:host(:not([secondary-first])) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-left,\\n\\t\\t:host([secondary-first]) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-right {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\td2l-icon {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\n\\t\\tfooter {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tpadding: 0.75rem 1rem;\\n\\t\\t\\tz-index: 1; /* ensures the footer box-shadow is over main areas with background colours set */\\n\\t\\t}\\n\\t\\theader {\\n\\t\\t\\tz-index: 14; /* ensures the header box-shadow is over main areas with background colours set, and opt-in on top of sticky header */\\n\\t\\t}\\n\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:focus,\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tbox-shadow: none;\\n\\t\\t}\\n\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-line::after,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: var(--d2l-color-ferrite);\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\ttransition: background-color 100ms, box-shadow 100ms;\\n\\t\\t}\\n\\t\\t.d2l-template-primary-secondary-divider:hover,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::after {\\n\\t\\t\\ttransition-delay: 100ms;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar {\\n\\t\\t\\twidth: 8px;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-track {\\n\\t\\t\\tbackground: rgba(255, 255, 255, 0.4);\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-thumb {\\n\\t\\t\\tbackground: var(--d2l-color-galena);\\n\\t\\t\\tborder-radius: 4px;\\n\\t\\t}\\n\\n\\t\\t.d2l-template-scroll::-webkit-scrollbar-thumb:hover {\\n\\t\\t\\tbackground: var(--d2l-color-tungsten);\\n\\t\\t}\\n\\n\\t\\t/* For Firefox */\\n\\t\\t.d2l-template-scroll {\\n\\t\\t\\tscrollbar-color: var(--d2l-color-galena) rgba(255, 255, 255, 0.4);\\n\\t\\t\\tscrollbar-width: thin;\\n\\t\\t}\\n\\n\\t\\t@media (prefers-reduced-motion: reduce) {\\n\\t\\t\\t.d2l-template-primary-secondary-divider,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-line::before,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-line::after,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\ttransition: none;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media only screen and (max-width: 767px) {\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\tflex-direction: column;\\n\\t\\t\\t}\\n\\n\\t\\t\\tmain {\\n\\t\\t\\t\\tflex: 1 0 0;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tflex: none;\\n\\t\\t\\t}\\n\\t\\t\\taside,\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tmin-width: auto;\\n\\t\\t\\t}\\n\\t\\t\\t[data-is-collapsed] aside {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-desktop {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t:host([_static-footer]),\\n\\t\\t\\t:host([_static-footer]) > d2l-form {\\n\\t\\t\\t\\tbottom: unset;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) .d2l-template-primary-secondary-container {\\n\\t\\t\\t\\tmin-height: 100vh;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) .d2l-template-primary-secondary-content {\\n\\t\\t\\t\\tdisplay: grid;\\n\\t\\t\\t\\tflex-grow: 1;\\n\\t\\t\\t\\tgrid-template: 1fr auto auto / 1fr;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) .d2l-template-primary-secondary-content > * {\\n\\t\\t\\t\\tgrid-column: 1/-1;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) main {\\n\\t\\t\\t\\tgrid-row: 1 / -1;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tgrid-row: 2 / 3;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tgrid-row: 3 / 4;\\n\\t\\t\\t}\\n\\t\\t\\t:host([_static-footer]) :not([data-background-shading=\\\"secondary\\\"]) > .d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\tbackground-color: white;\\n\\t\\t\\t}\\n\\n\\t\\t\\t/* Attribute selector is only used to increase specificity */\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\t\\tcursor: ns-resize;\\n\\t\\t\\t\\theight: 0.1rem;\\n\\t\\t\\t\\twidth: 100%;\\n\\t\\t\\t}\\n\\t\\t\\t:host([resizable]) [data-is-collapsed] .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) [data-is-collapsed] .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tcursor: n-resize;\\n\\t\\t\\t}\\n\\t\\t\\t:host([resizable]) [data-is-expanded] .d2l-template-primary-secondary-divider,\\n\\t\\t\\t:host(:not([resizable])) [data-is-expanded] .d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tcursor: s-resize;\\n\\t\\t\\t}\\n\\n\\t\\t\\t/* Attribute selector is only used to increase specificity */\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:hover,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider:hover,\\n\\t\\t\\t:host([resizable]) .d2l-template-primary-secondary-divider:focus,\\n\\t\\t\\t:host(:not([resizable])) .d2l-template-primary-secondary-divider:focus {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\t\\tborder-radius: 0;\\n\\t\\t\\t\\tbottom: 0.1rem;\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t\\tinset-inline-end: calc(17px + 0.2rem);\\n\\t\\t\\t\\toverflow: hidden;\\n\\t\\t\\t\\ttop: auto;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\talign-items: center;\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\t\\tborder-radius: 0.25rem 0.25rem 0 0;\\n\\t\\t\\t\\tbottom: 0;\\n\\t\\t\\t\\tdisplay: flex;\\n\\t\\t\\t\\tjustify-content: center;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\tright: 0;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-mobile,\\n\\t\\t\\t.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle,\\n\\t\\t\\t.d2l-template-primary-secondary-divider-handle-mobile {\\n\\t\\t\\t\\theight: 1rem;\\n\\t\\t\\t\\twidth: 2.2rem;\\n\\t\\t\\t}\\n\\t\\t\\t.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle {\\n\\t\\t\\t\\tbox-shadow: none;\\n\\t\\t\\t\\theight: 1.2rem;\\n\\t\\t\\t\\tinset-inline-end: 17px;\\n\\t\\t\\t\\twidth: 2.6rem;\\n\\t\\t\\t}\\n\\t\\t\\td2l-icon {\\n\\t\\t\\t\\tcolor: white;\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t}\\n\\t\\t\\t${getFocusRingStyles(pseudoClass => `.d2l-template-primary-secondary-divider:${pseudoClass} .d2l-template-primary-secondary-divider-handle-mobile`, { extraStyles: css`right: 0.2rem; box-shadow: 0 0 0 2px #ffffff;` })}\\n\\t\\t\\t.d2l-template-primary-secondary-divider-shadow {\\n\\t\\t\\t\\tbox-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t\\theight: 100%;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\twidth: 100%;\\n\\t\\t\\t\\tz-index: -1;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t@media print {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\toverflow: visible;\\n\\t\\t\\t\\tposition: relative;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\tflex-direction: column;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content,\\n\\t\\t\\t.d2l-template-primary-secondary-content > main,\\n\\t\\t\\t.d2l-template-primary-secondary-secondary-container {\\n\\t\\t\\t\\toverflow: visible;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-content > main {\\n\\t\\t\\t\\tbackground: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-divider-not-resizable,\\n\\t\\t\\t.d2l-template-primary-secondary-divider {\\n\\t\\t\\t\\tdisplay: none;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-container > footer {\\n\\t\\t\\t\\tbox-shadow: none;\\n\\t\\t\\t\\tpadding: 0;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.d2l-template-primary-secondary-container,\\n\\t\\t\\t.d2l-template-primary-secondary-content {\\n\\t\\t\\t\\theight: auto;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "form"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.321.3",
+  "version": "3.323.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -11,7 +11,7 @@
   "scripts": {
     "build:clean": "node ./cli/clean.js",
     "build:icons": "node ./cli/icon-generator.js",
-    "build:illustrations": "node ./cli/empty-state-illustration-generator.js",
+    "build:illustrations": "node ./cli/state-illustration-generator.js",
     "build:sass": "sass ./test/sass.scss > ./test/sass.output.css",
     "build:wca": "node ./cli/wca.js \"{components,mixins,templates}/**/*.js\"",
     "build": "npm run build:clean && npm run build:icons && npm run build:illustrations && npm run build:sass && npm run build:wca",