@clevercloud/components - npm Package Compare versions

Comparing version 6.8.1 to 6.9.0

CHANGELOG.md

@@ -9,2 +9,15 @@ ---
 
+...
+
+## 6.9.0 (2021-06-30)
+
+* Release a `custom-elements.json` following the new CEM format on npm
+
+### For devs
+
+* Replace WCA with OpenWC's CEM analyzer
+  * This includes a few simplifications on how we write JSDoc
+
+## 6.8.1 (2021-06-25)
+
 * Improve display of `preview:list` task
@@ -75,3 +88,3 @@ * `events.js`:
 
-* Introduce `defaultThemeStyles` with monospace font-family 
+* Introduce `defaultThemeStyles` with monospace font-family
 * `<cc-invoice>`: adjust spacing around "Download PDF" for narrow mode
@@ -84,11 +97,11 @@ * `<cc-invoice-table>`: introduce a responsive system (big/small render modes)
 * `<cc-input-number>`
-  * When in controls mode and in a disabled state the buttons also appear in a disabled state 
+  * When in controls mode and in a disabled state the buttons also appear in a disabled state
     with a slight opacity change
-  * Fixed a bug that allowed to change the value of the input in controls mode 
+  * Fixed a bug that allowed to change the value of the input in controls mode
     when the component was in a readonly state
   * The buttons in controls mode now get the state of disabled when min or max value is reached
     (e.g: If we have a value of `0` and the min is `0` the `decrement` button will change to `disabled`. The same would
-    happen  for the `increment` button if we had a value of `10` and a max of `10`) 
-    
-    
+    happen  for the `increment` button if we had a value of `10` and a max of `10`)
+
+
 ## 6.2.3 (2021-04-01)
@@ -117,4 +130,4 @@
 * New component:
-  * `<cc-input-number>` 
-  
+  * `<cc-input-number>`
+
 ## 6.0.1 (2021-03-15)
@@ -324,3 +337,3 @@
   * Show list of images used by a component in docs page
-  * Add link to source for each component in docs page 
+  * Add link to source for each component in docs page
   * Add details about component default CSS `display` in docs page
@@ -327,0 +340,0 @@ * Force white background in preview (iPad gets dark auto mode)

dist/addon/cc-addon-option.js

@@ -1,2 +0,2 @@
-import"../atoms/cc-img.js";import"../atoms/cc-toggle.js";import{LitElement as e,html as t,css as o}from"lit-element";import{dispatchCustomEvent as i}from"../lib/events.js";import{i18n as l}from"../lib/i18n.js";class n extends e{static get properties(){return{title:{type:String},logo:{type:String},enabled:{type:Boolean,reflect:!0}}}constructor(){super(),this.title=null,this.logo=null,this.enabled=!1}_onToggleOption(){this.enabled=!this.enabled,i(this,"input",this.enabled)}render(){const e=[{label:l("cc-addon-option.disabled"),value:!1},{label:l("cc-addon-option.enabled"),value:!0}];return t`<cc-img class=logo src=${this.logo}></cc-img><div class=option-main><div class=option-name>${this.title}</div><slot class=option-details></slot><cc-toggle .choices=${e} .value=${this.enabled} @cc-toggle:input=${this._onToggleOption}></cc-toggle></div>`}static get styles(){return[o`:host{border-radius:.25rem;display:grid;grid-gap:1rem;grid-template-columns:min-content 1fr;padding:1rem}::slotted(.option-warning){color:#555;font-style:italic}.option-main{display:grid;grid-gap:.5rem}.option-name{font-weight:700;line-height:1.6;min-height:1.6rem}:host(:not([enabled])){background-color:#f8f8f8;border:2px solid #f8f8f8}:host([enabled]){border:2px solid #30ab61}.logo{border-radius:.25rem;height:1.6rem;width:1.6rem}cc-toggle{justify-self:end;margin-top:.5rem}:host([enabled]) cc-toggle{--cc-toggle-color:hsl(144, 56%, 43%)}.option-details{line-height:1.5}`]}}window.customElements.define("cc-addon-option",n);export{n as CcAddonOption};
+import"../atoms/cc-img.js";import"../atoms/cc-toggle.js";import{LitElement as e,html as t,css as o}from"lit-element";import{dispatchCustomEvent as i}from"../lib/events.js";import{i18n as l}from"../lib/i18n.js";class n extends e{static get properties(){return{enabled:{type:Boolean,reflect:!0},logo:{type:String},title:{type:String}}}constructor(){super(),this.enabled=!1,this.logo=null,this.title=null}_onToggleOption(){this.enabled=!this.enabled,i(this,"input",this.enabled)}render(){const e=[{label:l("cc-addon-option.disabled"),value:!1},{label:l("cc-addon-option.enabled"),value:!0}];return t`<cc-img class=logo src=${this.logo}></cc-img><div class=option-main><div class=option-name>${this.title}</div><slot class=option-details></slot><cc-toggle .choices=${e} .value=${this.enabled} @cc-toggle:input=${this._onToggleOption}></cc-toggle></div>`}static get styles(){return[o`:host{border-radius:.25rem;display:grid;grid-gap:1rem;grid-template-columns:min-content 1fr;padding:1rem}::slotted(.option-warning){color:#555;font-style:italic}.option-main{display:grid;grid-gap:.5rem}.option-name{font-weight:700;line-height:1.6;min-height:1.6rem}:host(:not([enabled])){background-color:#f8f8f8;border:2px solid #f8f8f8}:host([enabled]){border:2px solid #30ab61}.logo{border-radius:.25rem;height:1.6rem;width:1.6rem}cc-toggle{justify-self:end;margin-top:.5rem}:host([enabled]) cc-toggle{--cc-toggle-color:hsl(144, 56%, 43%)}.option-details{line-height:1.5}`]}}window.customElements.define("cc-addon-option",n);export{n as CcAddonOption};
 //# sourceMappingURL=cc-addon-option.js.map

dist/addon/cc-elasticsearch-info.js

@@ -1,2 +0,2 @@
-import"../atoms/cc-img.js";import"../atoms/cc-flex-gap.js";import"../molecules/cc-error.js";import{LitElement as e,html as r,css as c}from"lit-element";import{classMap as s}from"lit-html/directives/class-map.js";import{i18n as t}from"../lib/i18n.js";import{skeletonStyles as i}from"../styles/skeleton.js";import{ccLink as a,linkStyles as l}from"../templates/cc-link.js";const o=new URL(new URL("../assets/info.svg",import.meta.url).href,import.meta.url).href;class n extends e{static get properties(){return{links:{type:Array,attribute:"links"},error:{type:Boolean,attribute:"error"}}}constructor(){super(),this.error=!1}render(){const e=this.links||[],c=e.find((({type:e})=>"elasticsearch"===e)),i=e.find((({type:e})=>"kibana"===e)),l=e.find((({type:e})=>"apm"===e));return r`<div class=info-ribbon>${t("cc-elasticsearch-info.info")}</div>${this.error?"":r`<div class=info-text>${t("cc-elasticsearch-info.text")}</div><cc-flex-gap class=link-list>${a("https://www.clever-cloud.com/doc/addons/elastic/",r`<cc-img src=${o}></cc-img><span>${t("cc-elasticsearch-info.link.doc")}</span>`)} ${null!=c?r`${a(c.href,r`<cc-img src=${"https://static-assets.cellar.services.clever-cloud.com/logos/elastic.svg"}></cc-img><span class=${s({skeleton:null==c.href})}>${t("cc-elasticsearch-info.link.elasticsearch")}</span>`)}`:""} ${null!=i?r`${a(i.href,r`<cc-img src=${"https://static-assets.cellar.services.clever-cloud.com/logos/elasticsearch-kibana.svg"}></cc-img><span class=${s({skeleton:null==i.href})}>${t("cc-elasticsearch-info.link.kibana")}</span>`)}`:""} ${null!=l?r`${a(l.href,r`<cc-img src=${"https://static-assets.cellar.services.clever-cloud.com/logos/elasticsearch-apm.svg"}></cc-img><span class=${s({skeleton:null==l.href})}>${t("cc-elasticsearch-info.link.apm")}</span>`)}`:""}</cc-flex-gap>`} ${this.error?r`<cc-error>${t("cc-elasticsearch-info.error")}</cc-error>`:""}`}static get styles(){return[i,l,c`:host{--cc-gap:1rem;background-color:#fff;border:1px solid #bcc2d1;border-radius:.25rem;display:grid;grid-gap:var(--cc-gap);overflow:hidden;padding:var(--cc-gap);padding-left:4rem;position:relative}.cc-link{align-items:center;display:flex}cc-img{border-radius:.25rem;flex:0 0 auto;height:1.5rem;margin-right:.5rem;width:1.5rem}.info-ribbon{--height:1.5rem;--width:8rem;--r:-45deg;--translate:1.6rem;background:#3a3871;color:#fff;font-size:.9rem;font-weight:700;height:var(--height);left:calc(var(--width)/ -2);line-height:var(--height);position:absolute;text-align:center;top:calc(var(--height)/ -2);transform:rotate(var(--r)) translateY(var(--translate));width:var(--width);z-index:2}.skeleton{background-color:#bbb}cc-error{text-align:center}`]}}window.customElements.define("cc-elasticsearch-info",n);export{n as CcElasticsearchInfo};
+import"../atoms/cc-img.js";import"../atoms/cc-flex-gap.js";import"../molecules/cc-error.js";import{LitElement as e,html as r,css as c}from"lit-element";import{classMap as s}from"lit-html/directives/class-map.js";import{i18n as t}from"../lib/i18n.js";import{skeletonStyles as i}from"../styles/skeleton.js";import{ccLink as a,linkStyles as l}from"../templates/cc-link.js";const o=new URL(new URL("../assets/info.svg",import.meta.url).href,import.meta.url).href;class n extends e{static get properties(){return{error:{type:Boolean,attribute:"error"},links:{type:Array,attribute:"links"}}}constructor(){super(),this.error=!1}render(){const e=this.links||[],c=e.find((({type:e})=>"elasticsearch"===e)),i=e.find((({type:e})=>"kibana"===e)),l=e.find((({type:e})=>"apm"===e));return r`<div class=info-ribbon>${t("cc-elasticsearch-info.info")}</div>${this.error?"":r`<div class=info-text>${t("cc-elasticsearch-info.text")}</div><cc-flex-gap class=link-list>${a("https://www.clever-cloud.com/doc/addons/elastic/",r`<cc-img src=${o}></cc-img><span>${t("cc-elasticsearch-info.link.doc")}</span>`)} ${null!=c?r`${a(c.href,r`<cc-img src=${"https://static-assets.cellar.services.clever-cloud.com/logos/elastic.svg"}></cc-img><span class=${s({skeleton:null==c.href})}>${t("cc-elasticsearch-info.link.elasticsearch")}</span>`)}`:""} ${null!=i?r`${a(i.href,r`<cc-img src=${"https://static-assets.cellar.services.clever-cloud.com/logos/elasticsearch-kibana.svg"}></cc-img><span class=${s({skeleton:null==i.href})}>${t("cc-elasticsearch-info.link.kibana")}</span>`)}`:""} ${null!=l?r`${a(l.href,r`<cc-img src=${"https://static-assets.cellar.services.clever-cloud.com/logos/elasticsearch-apm.svg"}></cc-img><span class=${s({skeleton:null==l.href})}>${t("cc-elasticsearch-info.link.apm")}</span>`)}`:""}</cc-flex-gap>`} ${this.error?r`<cc-error>${t("cc-elasticsearch-info.error")}</cc-error>`:""}`}static get styles(){return[i,l,c`:host{--cc-gap:1rem;background-color:#fff;border:1px solid #bcc2d1;border-radius:.25rem;display:grid;grid-gap:var(--cc-gap);overflow:hidden;padding:var(--cc-gap);padding-left:4rem;position:relative}.cc-link{align-items:center;display:flex}cc-img{border-radius:.25rem;flex:0 0 auto;height:1.5rem;margin-right:.5rem;width:1.5rem}.info-ribbon{--height:1.5rem;--width:8rem;--r:-45deg;--translate:1.6rem;background:#3a3871;color:#fff;font-size:.9rem;font-weight:700;height:var(--height);left:calc(var(--width)/ -2);line-height:var(--height);position:absolute;text-align:center;top:calc(var(--height)/ -2);transform:rotate(var(--r)) translateY(var(--translate));width:var(--width);z-index:2}.skeleton{background-color:#bbb}cc-error{text-align:center}`]}}window.customElements.define("cc-elasticsearch-info",n);export{n as CcElasticsearchInfo};
 //# sourceMappingURL=cc-elasticsearch-info.js.map

dist/maps/cc-map-marker-dot.js

@@ -1,2 +0,2 @@
-import{LitElement as o,html as t,css as r}from"lit-element";const e=["#40b970","#36a562","#2c9254","#237f46","#1a6c39","#115a2c","#084920","#003814"];class s extends o{static get properties(){return{count:{type:Number,reflect:!0},_color:{type:String}}}constructor(){super(),this.size=[16,16],this.anchor=[8,8],this.tooltip=[0,0]}_getColorFromCount(o){const t=Math.floor(Math.log(o)),r=Math.min(t,e.length-1);return e[r]}update(o){o.has("count")&&(this._color=this._getColorFromCount(this.count)),super.update(o)}render(){return t`<div style=${`--dot-color:${this._color}ff;--dot-color-half:${this._color}66;--dot-color-zero:${this._color}00`}></div>`}static get styles(){return[r`:host{display:inline-block}div{--dot-size:var(--cc-map-marker-dot-size, 6px);animation:2s infinite pulse;background:var(--dot-color);border-radius:50%;cursor:pointer;height:var(--dot-size);width:var(--dot-size)}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--dot-color-half)}70%{box-shadow:0 0 0 var(--dot-size) var(--dot-color-zero)}100%{box-shadow:0 0 0 0 var(--dot-color-zero)}}`]}}window.customElements.define("cc-map-marker-dot",s);export{s as CcMapMarkerDot};
+import{LitElement as o,html as t,css as r}from"lit-element";const e=["#40b970","#36a562","#2c9254","#237f46","#1a6c39","#115a2c","#084920","#003814"];class s extends o{static get properties(){return{count:{type:Number,reflect:!0},_color:{type:String}}}get anchor(){return[8,8]}get size(){return[16,16]}get tooltip(){return[0,0]}_getColorFromCount(o){const t=Math.floor(Math.log(o)),r=Math.min(t,e.length-1);return e[r]}update(o){o.has("count")&&(this._color=this._getColorFromCount(this.count)),super.update(o)}render(){return t`<div style=${`--dot-color:${this._color}ff;--dot-color-half:${this._color}66;--dot-color-zero:${this._color}00`}></div>`}static get styles(){return[r`:host{display:inline-block}div{--dot-size:var(--cc-map-marker-dot-size, 6px);animation:2s infinite pulse;background:var(--dot-color);border-radius:50%;cursor:pointer;height:var(--dot-size);width:var(--dot-size)}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--dot-color-half)}70%{box-shadow:0 0 0 var(--dot-size) var(--dot-color-zero)}100%{box-shadow:0 0 0 0 var(--dot-color-zero)}}`]}}window.customElements.define("cc-map-marker-dot",s);export{s as CcMapMarkerDot};
 //# sourceMappingURL=cc-map-marker-dot.js.map

dist/maps/cc-map-marker-server.js

@@ -1,2 +0,2 @@
-import{LitElement as t,svg as e,css as i}from"lit-element";class r extends t{static get properties(){return{state:{type:String,reflect:!0}}}constructor(){super(),this.state="default",this.size=[32,32],this.anchor=[16,32],this.tooltip=[0,-32]}render(){return e`
+import{LitElement as e,svg as t,css as r}from"lit-element";class i extends e{static get properties(){return{state:{type:String,reflect:!0}}}constructor(){super(),this.state="default"}get anchor(){return[16,32]}get size(){return[32,32]}get tooltip(){return[0,-32]}render(){return t`
       <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 100 100">
@@ -23,3 +23,3 @@ <!-- You got to love this "simple" SVG gradient syntax ;-) -->
       </svg>
-    `}static get styles(){return[i`:host{display:inline-block}svg{display:block;filter:drop-shadow(0 0 2px #555);height:32px;width:32px}:host(:not([state=default])) svg{transform:scale(1.2);transform-origin:center bottom}:host([state=selected]) svg{filter:drop-shadow(0 0 2px #e307d9)}path{fill:#999;stroke:#333}:host([state=selected]) path{fill:url(#gradient);stroke:#000}.gradient-1{stop-color:#f19175}.gradient-2{stop-color:#cf3942}.gradient-3{stop-color:#e307d9}rect{fill:#333}:host(:not([state=default])) rect{fill:#000}:host([state=selected]) circle{animation:var(--duration) var(--delay) infinite led-half}circle:nth-of-type(2){--duration:0.9s;--delay:0.25s}circle:nth-of-type(3){--duration:1.1s;--delay:0.5s}circle:nth-of-type(4){--duration:0.8s;--delay:0.75s}circle:nth-of-type(6){--duration:0.95s;--delay:0.15s}circle:nth-of-type(8){--duration:0.85s;--delay:0.45s}circle:nth-of-type(9){--duration:1.05s;--delay:0.65s}circle:nth-of-type(10){--duration:0.75s;--delay:0.95s}@keyframes led-half{0%,20%{visibility:hidden}100%{visibility:visible}}`]}}window.customElements.define("cc-map-marker-server",r);export{r as CcMapMarkerServer};
+    `}static get styles(){return[r`:host{display:inline-block}svg{display:block;filter:drop-shadow(0 0 2px #555);height:32px;width:32px}:host(:not([state=default])) svg{transform:scale(1.2);transform-origin:center bottom}:host([state=selected]) svg{filter:drop-shadow(0 0 2px #e307d9)}path{fill:#999;stroke:#333}:host([state=selected]) path{fill:url(#gradient);stroke:#000}.gradient-1{stop-color:#f19175}.gradient-2{stop-color:#cf3942}.gradient-3{stop-color:#e307d9}rect{fill:#333}:host(:not([state=default])) rect{fill:#000}:host([state=selected]) circle{animation:var(--duration) var(--delay) infinite led-half}circle:nth-of-type(2){--duration:0.9s;--delay:0.25s}circle:nth-of-type(3){--duration:1.1s;--delay:0.5s}circle:nth-of-type(4){--duration:0.8s;--delay:0.75s}circle:nth-of-type(6){--duration:0.95s;--delay:0.15s}circle:nth-of-type(8){--duration:0.85s;--delay:0.45s}circle:nth-of-type(9){--duration:1.05s;--delay:0.65s}circle:nth-of-type(10){--duration:0.75s;--delay:0.95s}@keyframes led-half{0%,20%{visibility:hidden}100%{visibility:visible}}`]}}window.customElements.define("cc-map-marker-server",i);export{i as CcMapMarkerServer};
 //# sourceMappingURL=cc-map-marker-server.js.map

dist/pricing/cc-pricing-product.js

@@ -1,2 +0,2 @@
-import{LitElement as e,html as t,css as r}from"lit-element";import{classMap as i}from"lit-html/directives/class-map.js";import{ifDefined as s}from"lit-html/directives/if-defined.js";import{dispatchCustomEvent as o}from"../lib/events.js";import"../atoms/cc-img.js";import"../atoms/cc-loader.js";import"../molecules/cc-error.js";import"./cc-pricing-table.js";import{fakeString as c}from"../lib/fake-strings.js";import{i18n as n}from"../lib/i18n.js";import{skeletonStyles as a}from"../styles/skeleton.js";const l=c(180);class m extends e{static get properties(){return{action:{type:String},currency:{type:Object},description:{type:String},error:{type:Boolean,reflect:!0},features:{type:Array},icon:{type:String},items:{type:Array},name:{type:String}}}constructor(){super(),this.action="add",this.icons=[],this.features=[]}_onAddItem({detail:e}){const t=this.name;o(this,"add-product",{name:t,item:e})}render(){const e=null==this.items||null==this.features,r=e?"????????????":this.name,o=e?l:this.description;return t`<slot name=head><div class=head><div class=head-info><slot name=icon><cc-img class=product-logo src=${s(this.icon)} ?skeleton=${e}></cc-img></slot><div class=name><slot name=name><span class=${i({skeleton:e})}>${r}</span></slot></div></div>${e&&!this.error?t`<slot><div><span class="description skeleton">${o}</span></div></slot>`:""} ${e||this.error?"":t`<slot>${o}</slot>`}</div></slot>${this.error?t`<cc-error>${n("cc-pricing-product.error")}</cc-error>`:""} ${e&&!this.error?t`<cc-loader></cc-loader>`:""} ${e||this.error?"":t`<cc-pricing-table class=pricing-table .items=${this.items} .features=${this.features} .currency=${this.currency} action=${this.action} @cc-pricing-table:add-item=${this._onAddItem}></cc-pricing-table>`}`}static get styles(){return[a,r`:host{background-color:#fff;display:block}.head{display:grid;gap:1em;grid-auto-rows:min-content;padding:1em}.head-info{display:flex;flex-wrap:wrap;gap:0;margin:-.5em}.name,.product-logo,slot[name=icon]::slotted(*){margin:.5em}.product-logo,slot[name=icon]::slotted(*){--cc-img-fit:contain;border-radius:.25em;display:block;height:3em;width:3em}.name{align-self:center;font-size:1.5em;font-weight:700}.description{line-height:1.5}.pricing-table{overflow:auto}.skeleton{background-color:#bbb}:host([error]) .skeleton,:host([error]) [skeleton]{--cc-skeleton-state:paused}cc-loader{min-height:20em}cc-error{padding:0 1em 1em}`]}}window.customElements.define("cc-pricing-product",m);export{m as CcPricingProduct};
+import{LitElement as e,html as t,css as r}from"lit-element";import{classMap as i}from"lit-html/directives/class-map.js";import{ifDefined as s}from"lit-html/directives/if-defined.js";import{dispatchCustomEvent as o}from"../lib/events.js";import"../atoms/cc-img.js";import"../atoms/cc-loader.js";import"../molecules/cc-error.js";import"./cc-pricing-table.js";import{fakeString as c}from"../lib/fake-strings.js";import{i18n as n}from"../lib/i18n.js";import{skeletonStyles as a}from"../styles/skeleton.js";const l=c(180);class m extends e{static get properties(){return{action:{type:String},currency:{type:Object},description:{type:String},error:{type:Boolean,reflect:!0},features:{type:Array},icon:{type:String},items:{type:Array},name:{type:String}}}constructor(){super(),this.action="add",this.features=[]}_onAddItem({detail:e}){const t=this.name;o(this,"add-product",{name:t,item:e})}render(){const e=null==this.items||null==this.features,r=e?"????????????":this.name,o=e?l:this.description;return t`<slot name=head><div class=head><div class=head-info><slot name=icon><cc-img class=product-logo src=${s(this.icon)} ?skeleton=${e}></cc-img></slot><div class=name><slot name=name><span class=${i({skeleton:e})}>${r}</span></slot></div></div>${e&&!this.error?t`<slot><div><span class="description skeleton">${o}</span></div></slot>`:""} ${e||this.error?"":t`<slot>${o}</slot>`}</div></slot>${this.error?t`<cc-error>${n("cc-pricing-product.error")}</cc-error>`:""} ${e&&!this.error?t`<cc-loader></cc-loader>`:""} ${e||this.error?"":t`<cc-pricing-table class=pricing-table .items=${this.items} .features=${this.features} .currency=${this.currency} action=${this.action} @cc-pricing-table:add-item=${this._onAddItem}></cc-pricing-table>`}`}static get styles(){return[a,r`:host{background-color:#fff;display:block}.head{display:grid;gap:1em;grid-auto-rows:min-content;padding:1em}.head-info{display:flex;flex-wrap:wrap;gap:0;margin:-.5em}.name,.product-logo,slot[name=icon]::slotted(*){margin:.5em}.product-logo,slot[name=icon]::slotted(*){--cc-img-fit:contain;border-radius:.25em;display:block;height:3em;width:3em}.name{align-self:center;font-size:1.5em;font-weight:700}.description{line-height:1.5}.pricing-table{overflow:auto}.skeleton{background-color:#bbb}:host([error]) .skeleton,:host([error]) [skeleton]{--cc-skeleton-state:paused}cc-loader{min-height:20em}cc-error{padding:0 1em 1em}`]}}window.customElements.define("cc-pricing-product",m);export{m as CcPricingProduct};
 //# sourceMappingURL=cc-pricing-product.js.map

package.json

 {
   "name": "@clevercloud/components",
-  "version": "6.8.1",
+  "version": "6.9.0",
   "description": "This is a Work In Progress to introduce Web Components in our Clever Cloud Web based UIs.",
@@ -26,10 +26,10 @@ "license": "Apache-2.0",
     "components:check-lit": "lit-analyzer src",
-    "components:docs": "wca analyze src/** --outFile .components-docs/custom-elements.json",
+    "components:docs": "cem analyze --litelement",
+    "components:docs:watch": "cem analyze --litelement --watch",
     "test": "wtr 'test/**/*.test.*' --node-resolve",
     "test:watch": "wtr 'test/**/*.test.*' --node-resolve --watch",
-    "lint": "eslint --rulesdir eslint-rules rollup/*.js src stories tasks wds",
-    "lint:fix": "eslint --rulesdir eslint-rules --fix rollup/*.js src stories tasks wds",
+    "lint": "eslint --rulesdir eslint-rules rollup/*.js cem src stories tasks wds",
+    "lint:fix": "eslint --rulesdir eslint-rules --fix rollup/*.js cem src stories tasks wds",
     "prepack": "npm run test && npm run lint && npm run components:check-lit && npm run components:check-i18n && npm run components:build",
     "prestorybook:build": "npm run components:docs",
-    "prestorybook:dev": "npm run components:docs",
     "preview:list": "node tasks/preview.js list",
@@ -59,2 +59,3 @@ "preview:publish": "node tasks/preview.js publish",
     "@bundled-es-modules/chai": "^4.2.2",
+    "@custom-elements-manifest/analyzer": "^0.4.1",
     "@open-wc/dev-server-hmr": "^0.1.1",
@@ -108,9 +109,9 @@ "@rollup/plugin-alias": "^3.1.2",
     "text-table": "^0.2.0",
-    "unified": "^9.2.1",
-    "web-component-analyzer": "^1.1.6"
+    "unified": "^9.2.1"
   },
+  "customElements": "dist/custom-elements.json",
   "volta": {
-    "node": "14.16.0",
+    "node": "16.4.0",
     "npm": "7.6.1"
   }
 }

No alert changes

Improved metrics

Lines of code

1711

increased by0.06%

Worsened metrics

Total package byte prevSize

1656989

decreased by-0.84%

No dependency changes