@muonic/muon 0.0.2-experimental-176-bef4daf.0 → 0.0.2-experimental-178-7990088.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.2-beta.9](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.8...v0.0.2-beta.9) (2023-04-21)
+
 ### [0.0.2-beta.8](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.7...v0.0.2-beta.8) (2023-04-20)
 
 

package/components/card/src/card-component.js

@@ -9,6 +9,7 @@ import styles from './card-styles.css';
  *
  * @element card
  */
+
 export class Card extends ScopedElementsMixin(ImageHolderMixin(CardMixin(MuonElement))) {
 
   static get scopedElements() {

package/components/inputter/src/inputter-styles.slotted.css

@@ -1,6 +1,6 @@
 :host {
   /* NOTE: targeting Safari only */
-  @media not all and (min-resolution: 0.001dpcm) {
+  @media not all and (min-resolution: 0.001dpcm) { /* stylelint-disable-line media-feature-range-notation */
     /*
       NOTE: These styles are duplicated from inputter-styles.css
       due to this bug in Webkit: https://bugs.webkit.org/show_bug.cgi?id=223814

package/muon-element/index.js

@@ -16,9 +16,12 @@ export const MuonElementMixin = (superClass) => class extends superClass {
     super();
 
     this.type = 'standard';
+  }
 
-    this.__addLightDOM();
+  performUpdate() {
+    super.performUpdate();
 
+    this.__addLightDOM();
   }
 
   /**
@@ -26,7 +29,6 @@ export const MuonElementMixin = (superClass) => class extends superClass {
    * This currently has some limitations:
    * - Cannot easily target the element with attributes.
    * - With this implementation CSS can be written outside of host, leaking styles.
-   * - :host might not be the right use here as users might believe they can use its other features.
    *
    * @returns {CSSResultOrNative} - Return modified css that is injected.
    * @private
@@ -46,14 +48,13 @@ export const MuonElementMixin = (superClass) => class extends superClass {
       }
 
       const clonedCSS = Object.assign({}, css);
-
       const nodeName = this.nodeName.toLowerCase();
       const parentNode = this.getRootNode();
       const parentNodeType = parentNode.nodeName;
       const styleName = `${nodeName}-styles`;
 
-      // First need to replace `:host` with the component name
-      clonedCSS.cssText = clonedCSS.cssText.replace(/:host/g, nodeName);
+      // First need to replace `light-dom` with the component name
+      clonedCSS.cssText = clonedCSS.cssText.replace(/light-dom/g, nodeName);
 
       // How we add the styles depends on where it is being added, HTMLDocument or another ShadowDom.
       // If the Document we don't want to add multiple times

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-176-bef4daf.0",
+  "version": "0.0.2-experimental-178-7990088.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -17,51 +17,51 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@open-wc/building-rollup": "2.0.1",
-    "@open-wc/scoped-elements": "2.1.2",
-    "@rollup/plugin-alias": "3.1.9",
-    "@rollup/plugin-json": "4.1.0",
-    "@rollup/plugin-node-resolve": "14.0.0",
-    "@rollup/plugin-replace": "4.0.0",
-    "@rollup/plugin-virtual": "2.1.0",
-    "@web/dev-server": "0.1.32",
-    "@web/dev-server-rollup": "0.3.18",
-    "@web/dev-server-storybook": "0.5.4",
+    "@open-wc/building-rollup": "2.2.3",
+    "@open-wc/scoped-elements": "2.1.5",
+    "@rollup/plugin-alias": "5.0.0",
+    "@rollup/plugin-json": "6.0.0",
+    "@rollup/plugin-node-resolve": "15.0.2",
+    "@rollup/plugin-replace": "5.0.2",
+    "@rollup/plugin-virtual": "3.0.1",
+    "@web/dev-server": "0.2.1",
+    "@web/dev-server-rollup": "0.5.0",
+    "@web/dev-server-storybook": "0.7.1",
     "@web/storybook-prebuilt": "0.1.34",
-    "@webcomponents/scoped-custom-element-registry": "0.0.5",
-    "app-root-path": "3.0.0",
-    "autoprefixer": "10.4.7",
+    "@webcomponents/scoped-custom-element-registry": "0.0.9",
+    "app-root-path": "3.1.0",
+    "autoprefixer": "10.4.14",
     "chokidar": "3.5.3",
     "chroma-js": "2.4.2",
     "command-line-args": "5.2.1",
-    "deepmerge": "4.2.2",
-    "glob": "8.0.3",
+    "deepmerge": "4.3.1",
+    "glob": "10.2.2",
     "glob-to-regexp": "0.4.1",
-    "lit": "2.7.0",
+    "lit": "2.7.3",
     "lodash": "4.17.21",
     "path-is-inside": "1.0.2",
-    "postcss": "8.4.14",
+    "postcss": "8.4.23",
     "postcss-clean": "1.2.2",
-    "postcss-extend-rule": "^4.0.0",
-    "postcss-import": "14.1.0",
-    "postcss-preset-env": "7.7.2",
-    "postcss-simple-vars": "6.0.3",
-    "rollup-plugin-lit-css": "4.0.0",
+    "postcss-extend-rule": "4.0.0",
+    "postcss-import": "15.1.0",
+    "postcss-preset-env": "8.3.2",
+    "postcss-simple-vars": "7.0.1",
+    "rollup-plugin-lit-css": "4.0.1",
     "rollup-plugin-styles": "4.0.0",
-    "style-dictionary": "3.7.1",
-    "typescript": "4.8.2",
-    "web-component-analyzer": "1.1.6"
+    "style-dictionary": "3.8.0",
+    "typescript": "5.0.4",
+    "web-component-analyzer": "1.1.7"
   },
   "devDependencies": {
-    "@open-wc/testing": "3.1.6",
-    "@web/dev-server-esbuild": "0.3.2",
-    "@web/test-runner": "0.14.0",
-    "@web/test-runner-browserstack": "0.5.1",
-    "@web/test-runner-playwright": "0.8.10",
-    "ava": "4.3.3",
-    "c8": "^7.12.0",
-    "esmock": "^2.0.3",
-    "sinon": "14.0.0"
+    "@open-wc/testing": "3.1.8",
+    "@web/dev-server-esbuild": "0.4.1",
+    "@web/test-runner": "0.16.1",
+    "@web/test-runner-browserstack": "0.6.1",
+    "@web/test-runner-playwright": "0.10.0",
+    "ava": "5.2.0",
+    "c8": "7.13.0",
+    "esmock": "2.2.1",
+    "sinon": "15.0.4"
   },
   "engines": {
     "node": ">=16.13.0"

package/scripts/utils/index.mjs

@@ -4,7 +4,7 @@ import StyleDictionary from 'style-dictionary';
 import formatHelpers from 'style-dictionary/lib/common/formatHelpers/index.js';
 import _ from 'lodash';
 import appRoot from 'app-root-path';
-import glob from 'glob';
+import { glob } from 'glob';
 import globToRegExp from 'glob-to-regexp';
 import fs from 'fs';
 import path from 'path';

package/tests/components/inputter/__snapshots__/inputter.test.snap.js

@@ -1,5 +1,6 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
+
 snapshots["Inputter standard default"] = 
 `<div
   class="inputter"
@@ -77,6 +78,21 @@ snapshots["Inputter helper detail open"] =
 `;
 /* end snapshot Inputter helper detail open */
 
+snapshots["Inputter text disabled"] = 
+`<div
+  class="has-disabled inputter"
+  style=""
+>
+  <slot name="label">
+  </slot>
+  <div class="wrapper">
+    <slot>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot Inputter text disabled */
+
 snapshots["Inputter text mask text"] = 
 `<div
   class="has-mask inputter"
@@ -98,7 +114,7 @@ snapshots["Inputter text mask text"] =
 `;
 /* end snapshot Inputter text mask text */
 
-snapshots["Inputter text validation"] = 
+snapshots["Inputter text validation on input"] = 
 `<div
   class="inputter"
   style=""
@@ -111,100 +127,91 @@ snapshots["Inputter text validation"] =
   </div>
 </div>
 `;
-/* end snapshot Inputter text validation */
+/* end snapshot Inputter text validation on input */
 
-snapshots["Inputter radio standard radio"] = 
+snapshots["Inputter text validation on change"] = 
 `<div
-  class="inputter radio"
+  class="inputter"
   style=""
 >
-  <span class="input-heading">
-    What is your heating source?
-  </span>
+  <slot name="label">
+  </slot>
   <div class="wrapper">
     <slot>
     </slot>
   </div>
 </div>
 `;
-/* end snapshot Inputter radio standard radio */
+/* end snapshot Inputter text validation on change */
 
-snapshots["Inputter standard default"] = 
+snapshots["Inputter text mask & validation"] = 
 `<div
-  class="inputter"
-  style=""
+  class="has-mask inputter"
+  style="--maxlength:4;"
 >
   <slot name="label">
   </slot>
   <div class="wrapper">
     <slot>
     </slot>
+    <div
+      aria-hidden="true"
+      class="input-mask"
+    >
+      0000
+    </div>
   </div>
 </div>
 `;
-/* end snapshot Inputter standard default */
+/* end snapshot Inputter text mask & validation */
 
-snapshots["Inputter helper text"] = 
+snapshots["Inputter radio standard radio"] = 
 `<div
-  class="inputter"
+  class="inputter radio"
   style=""
 >
-  <slot name="label">
-  </slot>
-  <div class="helper">
-    What is this?
-  </div>
+  <span class="input-heading">
+    What is your heating source?
+  </span>
   <div class="wrapper">
     <slot>
     </slot>
   </div>
 </div>
 `;
-/* end snapshot Inputter helper text */
+/* end snapshot Inputter radio standard radio */
 
-snapshots["Inputter helper detail"] = 
+snapshots["Inputter radio radio mask"] = 
 `<div
-  class="inputter"
-  style=""
+  class="has-mask inputter radio"
+  style="--maxlength:3;"
 >
-  <slot name="label">
-  </slot>
-  <inputter-detail>
-    <div slot="heading">
-      What is this?
-    </div>
-    <slot name="tip-details">
-    </slot>
-  </inputter-detail>
+  <span class="input-heading">
+    What is your heating source?
+  </span>
   <div class="wrapper">
     <slot>
     </slot>
   </div>
 </div>
 `;
-/* end snapshot Inputter helper detail */
+/* end snapshot Inputter radio radio mask */
 
-snapshots["Inputter helper detail open"] = 
+snapshots["Inputter radio radio mask validation"] = 
 `<div
-  class="inputter"
-  style=""
+  class="has-mask inputter radio"
+  style="--maxlength:3;"
 >
-  <slot name="label">
-  </slot>
-  <inputter-detail open="">
-    <div slot="heading">
-      What is this?
-    </div>
-    <slot name="tip-details">
-    </slot>
-  </inputter-detail>
+  <span class="input-heading">
+    What is your heating source?
+  </span>
   <div class="wrapper">
     <slot>
     </slot>
   </div>
 </div>
 `;
-/* end snapshot Inputter helper detail open */
+/* end snapshot Inputter radio radio mask validation */
 
 snapshots["Inputter select standard select"] = 
 `<div
@@ -257,101 +264,3 @@ snapshots["Inputter date standard date"] =
 `;
 /* end snapshot Inputter date standard date */
 
-snapshots["Inputter text disabled"] = 
-`<div
-  class="has-disabled inputter"
-  style=""
->
-  <slot name="label">
-  </slot>
-  <div class="wrapper">
-    <slot>
-    </slot>
-  </div>
-</div>
-`;
-/* end snapshot Inputter text disabled */
-
-snapshots["Inputter text mask & validation"] = 
-`<div
-  class="has-mask inputter"
-  style="--maxlength:4;"
->
-  <slot name="label">
-  </slot>
-  <div class="wrapper">
-    <slot>
-    </slot>
-    <div
-      aria-hidden="true"
-      class="input-mask"
-    >
-      0000
-    </div>
-  </div>
-</div>
-`;
-/* end snapshot Inputter text mask & validation */
-
-snapshots["Inputter radio radio mask"] = 
-`<div
-  class="has-mask inputter radio"
-  style="--maxlength:3;"
->
-  <span class="input-heading">
-    What is your heating source?
-  </span>
-  <div class="wrapper">
-    <slot>
-    </slot>
-  </div>
-</div>
-`;
-/* end snapshot Inputter radio radio mask */
-
-snapshots["Inputter radio radio mask validation"] = 
-`<div
-  class="has-mask inputter radio"
-  style="--maxlength:3;"
->
-  <span class="input-heading">
-    What is your heating source?
-  </span>
-  <div class="wrapper">
-    <slot>
-    </slot>
-  </div>
-</div>
-`;
-/* end snapshot Inputter radio radio mask validation */
-
-snapshots["Inputter text validation on input"] = 
-`<div
-  class="inputter"
-  style=""
->
-  <slot name="label">
-  </slot>
-  <div class="wrapper">
-    <slot>
-    </slot>
-  </div>
-</div>
-`;
-/* end snapshot Inputter text validation on input */
-
-snapshots["Inputter text validation on change"] = 
-`<div
-  class="inputter"
-  style=""
->
-  <slot name="label">
-  </slot>
-  <div class="wrapper">
-    <slot>
-    </slot>
-  </div>
-</div>
-`;
-/* end snapshot Inputter text validation on change */
-

package/tests/mixins/muon-element.test.js

@@ -6,7 +6,7 @@ const MuonComponent = class extends MuonElement {
   get slottedStyles() {
     return {
       _$cssResult$: true,
-      cssText: ':host{color:red}'
+      cssText: 'light-dom{color:red}'
     };
   }
 

package/tests/scripts/utils/utils-test.mjs

@@ -190,7 +190,7 @@ testRunner('sourceFilesAnalyzer', async (t) => {
     inputter: ['helper', 'classes', 'inlineStyles', 'slottedStyles', 'isHelperOpen', 'isPristine', 'isDirty', 'validity', 'validationMessage', 'validation', 'disableNative', 'showMessage', 'name', 'value', 'labelID', 'heading', 'mask', 'separator', 'type'],
     'inputter-detail': ['icon', 'classes', 'inlineStyles', 'standardTemplate', 'open', 'type']
   };
-  t.deepEqual(jsonResult.tags?.map((tag) => tag.name), components);
+  t.deepEqual(jsonResult.tags?.map((tag) => tag.name).sort(), components.sort());
 
   components.forEach((component) => {
     t.deepEqual(jsonResult.tags.filter((tag) => tag.name === component)[0].properties?.map(