@brightspace-ui/core 3.62.1 → 3.62.2

package/components/count-badge/demo/count-badge.html

@@ -27,6 +27,12 @@
 				<template>
 					<d2l-count-badge id="badge-announce-changes"size="small" announce-changes tab-stop text=" 1 new notification." type="notification" number="1"></d2l-count-badge>
 					<d2l-button id="increment-count">Increment Count</d2l-button>
+					<script type="module">
+						document.getElementById('increment-count').addEventListener('click', () => {
+							document.getElementById('badge-announce-changes').number += 1;
+							document.getElementById('badge-announce-changes').text = `${document.getElementById('badge-announce-changes').number} new notifications.`;
+						});
+					</script>
 				</template>
 			</d2l-demo-snippet>
 
@@ -61,12 +67,7 @@
 					<d2l-count-badge size="small" has-tooltip text=" 2 new notifications." type="notification" number="2"></d2l-count-badge>
 				</template>
 			</d2l-demo-snippet>
+
 		</d2l-demo-page>
-		<script type="module">
-			document.getElementById('increment-count').addEventListener('click', () => {
-				document.getElementById('badge-announce-changes').number += 1;
-				document.getElementById('badge-announce-changes').text = `${document.getElementById('badge-announce-changes').number} new notifications.`;
-			});
-		</script>
 	</body>
 </html>

package/components/demo/code-view.js

@@ -36,10 +36,6 @@ class CodeView extends LitElement {
 		super.attributeChangedCallback(name, oldval, newval);
 	}
 
-	firstUpdated() {
-		this._updateCode(this.shadowRoot.querySelector('slot'));
-	}
-
 	render() {
 		return html`
 			<div class="d2l-code-view-src"><slot @slotchange="${this._handleSlotChange}"></slot></div>

package/components/demo/demo-snippet.js

@@ -117,10 +117,6 @@ class DemoSnippet extends LitElement {
 		this._skeletonOn = false;
 	}
 
-	firstUpdated() {
-		this._updateCode(this.shadowRoot.querySelector('slot:not([name="_demo"])'));
-	}
-
 	render() {
 		const skeleton = this._hasSkeleton ? html`<d2l-switch text="Skeleton" ?on="${this._skeletonOn}" @change="${this._handleSkeletonChange}"></d2l-switch>` : null;
 		const switches = html`
@@ -137,7 +133,7 @@ class DemoSnippet extends LitElement {
 				<div class="d2l-demo-snippet-demo">
 					<div class="d2l-demo-snippet-demo-padding">
 						<slot name="_demo"></slot>
-						<slot></slot>
+						<slot @slotchange="${this._handleSlotChange}"></slot>
 					</div>
 				</div>
 				${settings}
@@ -152,15 +148,10 @@ class DemoSnippet extends LitElement {
 		changedProperties.forEach((_, prop) => {
 			if (prop === '_code') {
 				if (this.shadowRoot) this.shadowRoot.querySelector('d2l-code-view').forceUpdate();
-				this._updateHasSkeleton();
 			}
 		});
 	}
 
-	forceCodeUpdate() {
-		if (this.shadowRoot) this._updateCode(this.shadowRoot.querySelector('slot:not([name="_demo"])'));
-	}
-
 	_applyAttr(name, value, applyToShadowRoot) {
 		const query = this._isTemplate ? 'slot[name="_demo"]' : 'slot:not([name="_demo"])';
 		if (!this.shadowRoot) return;
@@ -239,6 +230,10 @@ class DemoSnippet extends LitElement {
 		this._applyAttr('skeleton', this._skeletonOn, false);
 	}
 
+	_handleSlotChange(e) {
+		this._updateCode(e.target);
+	}
+
 	_removeImportedDemo() {
 		if (!this.shadowRoot) return;
 		const nodes = this.shadowRoot.querySelector('slot[name="_demo"]').assignedNodes();
@@ -276,6 +271,8 @@ class DemoSnippet extends LitElement {
 		}
 		const textNode = document.createTextNode(this._formatCode(tempContainer.innerHTML));
 		this._code = textNode.textContent;
+
+		this._updateHasSkeleton();
 	}
 
 	_updateHasSkeleton() {

package/package.json

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