Branch was auto-updated with the latest.

Author: github-actions[bot]

elements/pfe-readtime/README.md

@@ -13,7 +13,7 @@ This component functions purely as inline-content and does not require any focus
 ## Attributes
 
 - `word-count`:  Is the data-attribute you will leverage for readtime. Example: word-count="2500" will let the component know that there is 2500 words in that section and it will do it's calculations based on that number. If you don't want to/have a data-attribute to leverage you can use id="readtime1" and it will get the word count for you.
--`wpm`: Is the attribute used to store the average words per minute readtime for each supported country. For more information on these you can read https://irisreading.com/average-reading-speed-in-various-languages and https://iovs.arvojournals.org/article.aspx?articleid=216606.
+- `wpm`: Is the attribute used to store the average words per minute readtime for each supported country. For more information on these you can read https://irisreading.com/average-reading-speed-in-various-languages and https://iovs.arvojournals.org/article.aspx?articleid=216606.
 - `template`: Rather than use the light DOM region to provide the string template, you can also pass in the value via this attribute. Note that %t will be replaced with the computed readtime.
 - `lang`: By default the component will look to the language specified on the html tag but it can also accept an override via this attribute on a component level.
 - `for`: Specify the selector of the content you want to capture the word-count from.  Whatever you enter into this attribute will be found using `document.querySelector(<for attribute value>)`.

elements/pfe-readtime/pfe-readtime.ts

@@ -87,12 +87,20 @@ export class PfeReadtime extends LitElement {
   @observed
   @property({ type: String, reflect: true }) for?: string;
 
-  @property({ type: Number, reflect: true }) readtime = 0;
-
   @state() private content?: Node;
 
   @state() private readString = '';
 
+  private _readtime = 0;
+
+  /**
+   * Number of minutes readtime, estimated
+   * @attr {number} readtime
+   */
+  get readtime() {
+    return this._readtime;
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this._forChanged(undefined, this.for);
@@ -144,10 +152,12 @@ export class PfeReadtime extends LitElement {
   }
 
   private _updateReadtime() {
-    this.readtime =
+    this._readtime =
         !this.wpm ? 0
       : Math.floor(this.wordCount / this.wpm) || 0;
 
+    this.setAttribute('readtime', this._readtime.toString());
+
     this.readString =
         this.readtime <= 0 ? ''
       : this.templateString?.match(/%t/) ? this.templateString.replace('%t', `${this.readtime}`)

package-lock.json

@@ -0,0 +1,21 @@
+diff --git a/node_modules/cem-plugin-readonly/index.d.ts b/node_modules/cem-plugin-readonly/index.d.ts
+new file mode 100644
+index 0000000..7df30d1
+--- /dev/null
++++ b/node_modules/cem-plugin-readonly/index.d.ts
+@@ -0,0 +1,2 @@
++import type { Plugin } from '@custom-elements-manifest/analyzer';
++export declare function readonlyPlugin(): Plugin;
+diff --git a/node_modules/cem-plugin-readonly/index.js b/node_modules/cem-plugin-readonly/index.js
+index 132e6ee..bf8751e 100644
+--- a/node_modules/cem-plugin-readonly/index.js
++++ b/node_modules/cem-plugin-readonly/index.js
+@@ -10,7 +10,7 @@ import { isStaticMember } from '@custom-elements-manifest/analyzer/src/utils/ast
+ function isReadonly(node, ts) {
+   return (
+     node.modifiers?.some?.(x => x.kind === ts.SyntaxKind.ReadonlyKeyword) ||
+-    node.jsDoc?.tags?.some?.(tag => tag.kind === ts.SyntaxKind.JSDocReadonlyTag)
++    node.jsDoc?.flatMap(i => i.tags).some(tag => tag?.kind === ts.SyntaxKind.JSDocReadonlyTag)
+   );
+ }
+ 

patches/cem-plugin-readonly+0.0.2.patch

@@ -1,6 +1,7 @@
 import type { Config } from '@custom-elements-manifest/analyzer';
 
 import { moduleFileExtensionsPlugin } from 'cem-plugin-module-file-extensions';
+import { readonlyPlugin } from 'cem-plugin-readonly';
 import { cssCustomPropertiesDefaultPlugin } from './custom-elements-manifest/cssCustomPropertiesDefaultPlugin.js';
 import { dedentDescriptionsPlugin } from './custom-elements-manifest/dedent-descriptions.js';
 import { deprecatedDescriptionInlineTagPlugin } from './custom-elements-manifest/deprecated-description-inline-tag.js';
@@ -20,6 +21,7 @@ export function pfeCustomElementsManifestConfig(options?: Config): Config {
     ],
     litelement: true,
     plugins: [
+      readonlyPlugin(),
       cssCustomPropertiesDefaultPlugin(),
       moduleFileExtensionsPlugin(),
       moduleFileExtensionsPlugin({ from: 'src/', to: '' }),

tools/pfe-tools/custom-elements-manifest.ts

@@ -62,6 +62,7 @@
     "@web/test-runner-playwright": "^0.8.8",
     "api-viewer-element": "^0.6.2",
     "cem-plugin-module-file-extensions": "^0.0.2",
+    "cem-plugin-readonly": "^0.0.2",
     "dedent": "^0.7.0",
     "dotenv": "^10.0.0",
     "esbuild": "^0.14.0",