diff --git a/CHANGELOG.md b/CHANGELOG.md index a853280..bca6936 100644 --- a/CHANGELOG.md +++ b/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 `` styles in cases of forced theme via the `theme` attribute + ## [v2.0.4] - 2024-05-01 ### Changed diff --git a/events.css.js b/events.css.js index 94bf3bf..777eda9 100644 --- a/events.css.js +++ b/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}; } }`; diff --git a/events.js b/events.js index 3fe4d94..d49be28 100644 --- a/events.js +++ b/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']; } }); diff --git a/package-lock.json b/package-lock.json index 227dd33..188557c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@kernvalley/components", - "version": "2.0.4", + "version": "2.0.5", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@kernvalley/components", - "version": "2.0.4", + "version": "2.0.5", "funding": [ { "type": "librepay", diff --git a/package.json b/package.json index e2dfba6..9f4c64a 100644 --- a/package.json +++ b/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",