Merge pull request #51 from kernvalley/bug/krv-events-force-theme

Fix theming set via `theme` attribute

CHANGELOG.md

@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v2.0.5] - 2024-05-01
+
+### Fixed
+- Fixed `<krv-events>` styles in cases of forced theme via the `theme` attribute
+
 ## [v2.0.4] - 2024-05-01
 
 ### Changed

events.css.js

@@ -1,14 +1,23 @@
 import { gray } from '@shgysk8zer0/jss/palette/bootstrap.js';
 
+const lightBg = gray[0];
+const darkBg = gray[8];
+const lightColor = gray[8];
+const darkColor = gray[1];
+const lightBorder = gray[2];
+const darkBorder = gray[6];
+const lightHR = gray[3];
+const darkHR = gray[6];
+
 export default `:host {
 	display: block;
 	text-align: initial;
-	background-color: ${gray[0]};
-	color: ${gray[8]};
+	background-color: ${lightBg};
+	color: ${lightColor};
 	line-height: 1.3;
 	border-width: 1px;
 	border-style: solid;
-	border-color: ${gray[2]};
+	border-color: ${lightBorder};
 	border-radius: 6px;
 	max-width: 100%;
 	box-sizing: border-box;
@@ -37,7 +46,7 @@ export default `:host {
 .event:not(:last-of-type) {
 	border-width: 0 0 1px 0;
 	border-style: solid;
-	border-color: ${gray[3]};
+	border-color: ${lightHR};
 	margin-bottom: 1.1em;
 }
 
@@ -104,18 +113,22 @@ export default `:host {
 }
 
 :host([theme="dark"]) {
-	background-color: ${gray[8]};
-	color: #fefefe;
+	background-color: ${darkBg};
+	color: ${darkColor};
+}
+
+:host([theme="dark"]) .event:not(:last-of-type) {
+	border-color: ${darkHR};
 }
 
 @media (prefers-color-scheme: dark) {
 	:host(:not([theme="light"])) {
-		background-color: ${gray[8]};
-		color: #fefefe;
-		border-color: ${gray[6]};
+		background-color: ${darkBg};
+		color: ${darkColor};
+		border-color: ${darkBorder};
 	}
 
-	.event:not(:last-of-type) {
-		border-color: ${gray[6]};
+	:host(:not([theme="light"])) .event:not(:last-of-type) {
+		border-color: ${darkHR};
 	}
 }`;

events.js

@@ -24,24 +24,30 @@ const timeFormat = {
 };
 
 const getEvents = callOnce(() => getAllEvents());
-const protectedData = new WeakMap();
 
 function utm(url, { campaign, content = 'krv-events-el', medium, source, term }) {
 	return setUTMParams(url, { campaign, content, medium, source, term }).href;
 }
 
 registerCustomElement('krv-events', class HTMLKRVEventsElement extends HTMLElement {
+	#shadow;
+	#internals;
+
 	constructor() {
 		super();
 		const shadow = this.attachShadow({ mode: 'closed' });
 		const internals = this.attachInternals();
-		protectedData.set(this, { shadow, internals });
+		// protectedData.set(this, { shadow, internals });
 		internals.role = 'document';
 		internals.ariaLabel = 'Kern Valley Events Calendar';
+		internals.states.add('--loading');
+		internals.ariaBusy = 'true';
+		this.#shadow =  shadow;
+		this.#internals = internals;
 	}
 
 	get ready() {
-		if (! protectedData.has(this)) {
+		if (! this.#internals.states.has('--ready')) {
 			return when(this, 'ready');
 		} else {
 			return Promise.resolve();
@@ -63,33 +69,36 @@ registerCustomElement('krv-events', class HTMLKRVEventsElement extends HTMLEleme
 			await whenIntersecting(this);
 		}
 
-		const { shadow } = protectedData.get(this);
-
-		shadow.adoptedStyleSheets = await Promise.all([
+		this.#shadow.adoptedStyleSheets = await Promise.all([
 			new CSSStyleSheet().replace(styles),
 		]);
 
-		shadow.setHTML(template, sanitizer);
-		const link = shadow.querySelector('.app-link');
+		this.#shadow.setHTML(template, sanitizer);
+		const link = this.#shadow.querySelector('.app-link');
 		link.target = this.target;
 
 		if (this.hasAttribute('source')) {
 			link.href = utm(link.href, this);
 		}
 
+		this.#internals.states.add('--ready');
 		this.dispatchEvent(new Event('ready'));
 
 		this.render();
 	}
 
-	async render() {
+	async render({ signal } = {}) {
+		if (signal instanceof AbortSignal && signal.aborted) {
+			throw signal.reason;
+		}
+
 		const now = new Date().toISOString();
 		const [data] = await Promise.all([
-			getEvents(),
+			getEvents({ signal }),
 			this.ready,
 		]);
 
-		const tmp = protectedData.get(this).shadow.getElementById('event-template').content;
+		const tmp = this.#shadow.getElementById('event-template').content;
 		const { campaign, content, medium, source, term, target, tags } = this;
 
 		const filter = tags.length !== 0
@@ -143,7 +152,7 @@ registerCustomElement('krv-events', class HTMLKRVEventsElement extends HTMLEleme
 			});
 
 		if (events.length !== 0) {
-			protectedData.get(this).shadow.getElementById('events-list').replaceChildren(...events);
+			this.#shadow.getElementById('events-list').replaceChildren(...events);
 		}
 	}
 
@@ -230,7 +239,10 @@ registerCustomElement('krv-events', class HTMLKRVEventsElement extends HTMLEleme
 	attributeChangedCallback(name/*, oldVal, newVal*/) {
 		switch(name) {
 			case 'count':
-				this.render().catch(console.error);
+			case 'tags':
+				if (this.#internals.states.has('--ready')) {
+					this.render().catch(console.error);
+				}
 				break;
 
 			default:
@@ -239,6 +251,6 @@ registerCustomElement('krv-events', class HTMLKRVEventsElement extends HTMLEleme
 	}
 
 	static get observedAttributes() {
-		return ['count'];
+		return ['count', 'tags'];
 	}
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kernvalley/components",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "A collection of web components / custom elements from KernValley.US",
   "keywords": [
     "kern valley",