@muonic/muon 0.0.2-experimental-199-2e0610f.0 → 0.0.2-experimental-201-38f9ea8.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.16](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.15...v0.0.2-beta.16) (2023-05-31)
+
 ### [0.0.2-beta.15](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.14...v0.0.2-beta.15) (2023-05-24)
 
 ### [0.0.2-beta.14](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.13...v0.0.2-beta.14) (2023-05-23)

package/components/inputter/src/inputter-extends.css

@@ -0,0 +1,178 @@
+%label {
+  display: inline-block;
+  margin-block-start: $INPUTTER_LABEL_MARGIN_BLOCK_START;
+  margin-block-end: $INPUTTER_LABEL_MARGIN_BLOCK_END;
+  color: $INPUTTER_LABEL_COLOR;
+  max-width: $INPUTTER_LABEL_LINE_LENGTH;
+}
+
+%placeholder {
+  color: $INPUTTER_PLACEHOLDER_COLOR;
+  opacity: 1; /* NOTE: This overrides the Firefox user agent style of `opacity: 0.54;` */
+}
+
+%input {
+  margin: 0; /* NOTE: remove `margin: 2px` Safari user agent */
+  padding-block-start: $INPUTTER_FIELD_PADDING_BLOCK_START;
+  padding-block-end: $INPUTTER_FIELD_PADDING_BLOCK_END;
+  padding-inline-start: $INPUTTER_FIELD_PADDING_INLINE_START;
+  padding-inline-end: $INPUTTER_FIELD_PADDING_INLINE_END;
+  color: $INPUTTER_FIELD_COLOR;
+  line-height: $INPUTTER_FIELD_LINE_HEIGHT;
+  background-color: $INPUTTER_FIELD_BACKGROUND_COLOR;
+  border-width: $INPUTTER_FIELD_BORDER_WIDTH;
+  border-style: $INPUTTER_FIELD_BORDER_STYLE;
+  border-color: $INPUTTER_FIELD_BORDER_COLOR;
+  border-radius: $INPUTTER_FIELD_BORDER_RADIUS;
+  font-family: $INPUTTER_FIELD_FONT_FAMILY;
+  font-size: $INPUTTER_FIELD_FONT_SIZE;
+}
+
+%input-hover {
+  border-color: $INPUTTER_HOVER_BORDER_COLOR;
+  color: $INPUTTER_HOVER_COLOR;
+}
+
+%input-focus {
+  border-color: $INPUTTER_FOCUS_BORDER_COLOR;
+  color: $INPUTTER_FOCUS_COLOR;
+  outline-color: $INPUTTER_FOCUS_OUTLINE_COLOR;
+  outline-offset: $INPUTTER_FOCUS_OUTLINE_OFFSET;
+  outline-style: $INPUTTER_FOCUS_OUTLINE_STYLE;
+  outline-width: $INPUTTER_FOCUS_OUTLINE_WIDTH;
+}
+
+%input-disabled {
+  pointer-events: none;
+  color: $INPUTTER_DISABLED_COLOR;
+  background-color: $INPUTTER_DISABLED_BACKGROUND_COLOR;
+  border-color: $INPUTTER_DISABLED_BORDER_COLOR;
+}
+
+%input-disabled-placeholder {
+  color: $INPUTTER_DISABLED_PLACEHOLDER_COLOR;
+}
+
+%label-multiple {
+  display: block;
+  width: fit-content;
+  margin-block-start: revert; /* NOTE: @drew - 2023-05-18 - revert these to use padding instead, could benefit from using a `:not(.multiple)` on line 6 */
+  margin-block-end: revert; /* NOTE: @drew - 2023-05-18 - revert these to use padding instead, could benefit from using a `:not(.multiple)` on line 6 */
+  padding-inline-start: $INPUTTER_MULTIPLE_LABEL_PADDING_INLINE_START;
+  padding-inline-end: $INPUTTER_MULTIPLE_LABEL_PADDING_INLINE_END;
+  padding-block-start: $INPUTTER_MULTIPLE_LABEL_PADDING_BLOCK_START;
+  padding-block-end: $INPUTTER_MULTIPLE_LABEL_PADDING_BLOCK_END;
+}
+
+%label-multiple-hover {
+  color: $INPUTTER_HOVER_COLOR;
+}
+
+%input-multiple {
+  margin: 0; /* NOTE: remove user agent default margin */
+  appearance: none; /* NOTE: remove the user agent visual styles for checkbox and radio */
+  background-color: $INPUTTER_MULTIPLE_BACKGROUND_COLOR;
+  font: inherit; /* NOTE: inheiting font to ensure the use of `em` produces the desired outcome */
+  width: $INPUTTER_MULTIPLE_SIZE;
+  height: $INPUTTER_MULTIPLE_SIZE;
+  border-width: 0.125em; /* NOTE: equal to 2px when font-size is 16px */
+  border-style: solid;
+  border-color: $INPUTTER_MULTIPLE_BORDER_COLOR;
+  display: grid; /* NOTE: setting `display: grid` to position the `::before` */
+  place-content: center; /* NOTE: placing the content of grid in the centre */
+}
+
+%input-multiple-hover {
+  background-color: $INPUTTER_MULTIPLE_HOVER_BACKGROUND_COLOR;
+  border-color: $INPUTTER_MULTIPLE_HOVER_BORDER_COLOR;
+}
+
+%input-multiple-focus {
+  border-color: $INPUTTER_FOCUS_BORDER_COLOR;
+  outline-color: $INPUTTER_FOCUS_OUTLINE_COLOR;
+  outline-offset: $INPUTTER_FOCUS_OUTLINE_OFFSET;
+  outline-style: $INPUTTER_FOCUS_OUTLINE_STYLE;
+  outline-width: $INPUTTER_FOCUS_OUTLINE_WIDTH;
+}
+
+%input-multiple-disabled {
+  pointer-events: none;
+  background-color: $INPUTTER_MULTIPLE_DISABLED_BACKGROUND_COLOR;
+  border-color: $INPUTTER_MULTIPLE_DISABLED_BORDER_COLOR;
+}
+
+%input-checkbox {
+  border-radius: $INPUTTER_MULTIPLE_CHECKBOX_BORDER_RADIUS;
+}
+
+%input-radio {
+  border-radius: 50%;
+}
+
+%input-radio-checked-before {
+  content: "";
+  width: 0;
+  height: 0;
+  border-width: $INPUTTER_MULTIPLE_RADIO_DOT_SIZE;
+  border-style: solid;
+  border-color: $INPUTTER_MULTIPLE_RADIO_DOT_COLOR;
+  border-radius: 50%;
+}
+
+%input-checkbox-checked-before {
+  content: "";
+  width: $INPUTTER_MULTIPLE_CHECKBOX_CHECK_WIDTH;
+  height: $INPUTTER_MULTIPLE_CHECKBOX_CHECK_HEIGHT;
+  border-width: $INPUTTER_MULTIPLE_CHECKBOX_CHECK_SIZE;
+  border-style: solid;
+  border-color: $INPUTTER_MULTIPLE_CHECKBOX_CHECK_COLOR;
+  border-top: unset;
+  border-right-style: solid;
+  border-bottom-style: solid;
+  border-left: unset;
+  transform: translateY(-10%) rotate(45deg);
+}
+
+%input-select {
+  appearance: none; /* NOTE: remove the user agent visual styles */
+  padding-inline-end: $INPUTTER_FIELD_ICON_SPACER;
+}
+
+%input-search {
+  padding-inline-start: $INPUTTER_FIELD_ICON_SPACER;
+}
+
+%input-textarea {
+  display: block; /* NOTE: this is to remove the additional space at the bottom of `textarea` */
+}
+
+%input-mask {
+  width: calc(
+      (var(--maxlength))
+      * 1ch
+      + $INPUTTER_FIELD_PADDING_INLINE_START
+      + $INPUTTER_FIELD_PADDING_INLINE_END
+      + $INPUTTER_FIELD_BORDER_WIDTH
+      + $INPUTTER_FIELD_BORDER_WIDTH
+    );
+  font-family: $INPUTTER_MASK_FONT_FAMILY;
+}
+
+%input-mask-text {
+  font-weight: $INPUTTER_MASK_FONT_WEIGHT;
+}
+
+%input-validation {
+  display: flex;
+  align-items: center;
+  column-gap: $INPUTTER_VALIDATION_GAP;
+  width: fit-content;
+  margin-block-start: $INPUTTER_VALIDATION_MARGIN_BLOCK;
+  color: $INPUTTER_VALIDATION_WARNING_COLOR;
+  font-size: $INPUTTER_VALIDATION_FONT_SIZE;
+
+  & .icon {
+    width: $INPUTTER_VALIDATION_ICON_SIZE;
+    flex-shrink: 0;
+  }
+}

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

@@ -1,19 +1,15 @@
 @import "@muonic/muon/css/default.css";
+@import "./inputter-extends.css";
 
 :host {
   display: block;
 
   & ::slotted(label) {
-    display: inline-block;
-    margin-block-start: $INPUTTER_LABEL_MARGIN_BLOCK_START;
-    margin-block-end: $INPUTTER_LABEL_MARGIN_BLOCK_END;
-    color: $INPUTTER_LABEL_COLOR;
-    max-width: $INPUTTER_LABEL_LINE_LENGTH;
+    @extend %label;
   }
 
   & ::slotted(*)::placeholder {
-    color: $INPUTTER_PLACEHOLDER_COLOR;
-    opacity: 1; /* NOTE: This overrides the Firefox user agent style of `opacity: 0.54;` */
+    @extend %placeholder;
   }
 
   & ::slotted(:is(
@@ -26,20 +22,7 @@
   input[type="text"],
   select,
   textarea)) {
-    margin: 0; /* NOTE: remove `margin: 2px` Safari user agent */
-    padding-block-start: $INPUTTER_FIELD_PADDING_BLOCK_START;
-    padding-block-end: $INPUTTER_FIELD_PADDING_BLOCK_END;
-    padding-inline-start: $INPUTTER_FIELD_PADDING_INLINE_START;
-    padding-inline-end: $INPUTTER_FIELD_PADDING_INLINE_END;
-    color: $INPUTTER_FIELD_COLOR;
-    line-height: $INPUTTER_FIELD_LINE_HEIGHT;
-    background-color: $INPUTTER_FIELD_BACKGROUND_COLOR;
-    border-width: $INPUTTER_FIELD_BORDER_WIDTH;
-    border-style: $INPUTTER_FIELD_BORDER_STYLE;
-    border-color: $INPUTTER_FIELD_BORDER_COLOR;
-    border-radius: $INPUTTER_FIELD_BORDER_RADIUS;
-    font-family: $INPUTTER_FIELD_FONT_FAMILY;
-    font-size: $INPUTTER_FIELD_FONT_SIZE;
+    @extend %input;
   }
 
   & ::slotted(:is(
@@ -52,8 +35,7 @@
   input[type="text"]:hover,
   select:hover,
   textarea:hover)) {
-    border-color: $INPUTTER_HOVER_BORDER_COLOR;
-    color: $INPUTTER_HOVER_COLOR;
+    @extend %input-hover;
   }
 
   & ::slotted(:is(
@@ -66,12 +48,7 @@
   input[type="text"]:focus,
   select:focus,
   textarea:focus)) {
-    border-color: $INPUTTER_FOCUS_BORDER_COLOR;
-    color: $INPUTTER_FOCUS_COLOR;
-    outline-color: $INPUTTER_FOCUS_OUTLINE_COLOR;
-    outline-offset: $INPUTTER_FOCUS_OUTLINE_OFFSET;
-    outline-style: $INPUTTER_FOCUS_OUTLINE_STYLE;
-    outline-width: $INPUTTER_FOCUS_OUTLINE_WIDTH;
+    @extend %input-focus;
   }
 
   & .has-disabled {
@@ -85,14 +62,11 @@
     input[type="text"]:disabled,
     select:disabled,
     textarea:disabled)) {
-      pointer-events: none;
-      color: $INPUTTER_DISABLED_COLOR;
-      background-color: $INPUTTER_DISABLED_BACKGROUND_COLOR;
-      border-color: $INPUTTER_DISABLED_BORDER_COLOR;
+      @extend %input-disabled;
     }
 
     & ::slotted(*:disabled)::placeholder {
-      color: $INPUTTER_DISABLED_PLACEHOLDER_COLOR;
+      @extend %placeholder-disabled;
     }
   }
 
@@ -112,91 +86,51 @@
     & ::slotted(:is(
     input[type="checkbox"],
     input[type="radio"])) {
-      margin: 0; /* NOTE: remove user agent default margin */
-      appearance: none; /* NOTE: remove the user agent visual styles for checkbox and radio */
-      background-color: $INPUTTER_MULTIPLE_BACKGROUND_COLOR;
-      font: inherit; /* NOTE: inheiting font to ensure the use of `em` produces the desired outcome */
-      width: $INPUTTER_MULTIPLE_SIZE;
-      height: $INPUTTER_MULTIPLE_SIZE;
-      border-width: 0.125em; /* NOTE: equal to 2px when font-size is 16px */
-      border-style: solid;
-      border-color: $INPUTTER_MULTIPLE_BORDER_COLOR;
-      display: grid; /* NOTE: setting `display: grid` to position the `::before` */
-      place-content: center; /* NOTE: placing the content of grid in the centre */
+      @extend %input-multiple;
     }
 
     & ::slotted(:is(
     input[type="checkbox"]:hover,
     input[type="radio"]:hover)) {
-      background-color: $INPUTTER_MULTIPLE_HOVER_BACKGROUND_COLOR;
-      border-color: $INPUTTER_MULTIPLE_HOVER_BORDER_COLOR;
+      @extend %input-multiple-hover;
     }
 
     & ::slotted(:is(
     input[type="checkbox"]:focus-visible,
     input[type="radio"]:focus-visible)) {
-      border-color: $INPUTTER_FOCUS_BORDER_COLOR;
-      outline-color: $INPUTTER_FOCUS_OUTLINE_COLOR;
-      outline-offset: $INPUTTER_FOCUS_OUTLINE_OFFSET;
-      outline-style: $INPUTTER_FOCUS_OUTLINE_STYLE;
-      outline-width: $INPUTTER_FOCUS_OUTLINE_WIDTH;
+      @extend %input-multiple-focus;
     }
 
     &.has-disabled {
       & ::slotted(:is(
       input[type="checkbox"]:disabled,
       input[type="radio"]:disabled)) {
-        pointer-events: none;
-        background-color: $INPUTTER_DISABLED_BACKGROUND_COLOR;
-        border-color: $INPUTTER_DISABLED_BORDER_COLOR;
+        @extend %input-multiple-disabled;
       }
     }
 
     & ::slotted(input[type="checkbox"]) {
-      border-radius: $INPUTTER_MULTIPLE_CHECKBOX_BORDER_RADIUS;
+      @extend %input-checkbox;
     }
 
     & ::slotted(input[type="radio"]) {
-      border-radius: 50%;
+      @extend %input-radio;
     }
 
     & ::slotted(input[type="radio"]:checked)::before {
-      content: "";
-      width: 0;
-      height: 0;
-      border-width: $INPUTTER_MULTIPLE_RADIO_DOT_SIZE;
-      border-style: solid;
-      border-color: $INPUTTER_MULTIPLE_RADIO_DOT_COLOR;
-      border-radius: 50%;
+      @extend %input-radio-checked-before;
     }
 
     & ::slotted(input[type="checkbox"]:checked)::before {
-      content: "";
-      width: $INPUTTER_MULTIPLE_CHECKBOX_CHECK_WIDTH;
-      height: $INPUTTER_MULTIPLE_CHECKBOX_CHECK_HEIGHT;
-      border-width: $INPUTTER_MULTIPLE_CHECKBOX_CHECK_SIZE;
-      border-style: solid;
-      border-color: $INPUTTER_MULTIPLE_CHECKBOX_CHECK_COLOR;
-      border-top: unset;
-      border-right-style: solid;
-      border-bottom-style: solid;
-      border-left: unset;
-      transform: translateY(-10%) rotate(45deg);
+      @extend %input-checkbox-checked-before;
     }
 
     & ::slotted(label) {
-      display: block;
-      width: fit-content;
-      margin-block-start: revert; /* NOTE: @drew - 2023-05-18 - revert these to use padding instead, could benefit from using a `:not(.multiple)` on line 6 */
-      margin-block-end: revert; /* NOTE: @drew - 2023-05-18 - revert these to use padding instead, could benefit from using a `:not(.multiple)` on line 6 */
-      padding-inline-start: $INPUTTER_MULTIPLE_LABEL_PADDING_INLINE_START;
-      padding-inline-end: $INPUTTER_MULTIPLE_LABEL_PADDING_INLINE_END;
-      padding-block-start: $INPUTTER_MULTIPLE_LABEL_PADDING_BLOCK_START;
-      padding-block-end: $INPUTTER_MULTIPLE_LABEL_PADDING_BLOCK_END;
+      @extend %label-multiple;
     }
 
     & ::slotted(label:hover) {
-      color: $INPUTTER_HOVER_COLOR;
+      @extend %label-multiple-hover;
     }
   }
 
@@ -204,16 +138,15 @@
   & ::slotted(:is(
   select,
   input[type="date"])) {
-    appearance: none; /* NOTE: remove the user agent visual styles */
-    padding-inline-end: $INPUTTER_FIELD_ICON_SPACER;
+    @extend %input-select;
   }
 
   & ::slotted(input[type="search"]) {
-    padding-inline-start: $INPUTTER_FIELD_ICON_SPACER;
+    @extend %input-search;
   }
 
   & ::slotted(textarea) {
-    display: block; /* NOTE: this is to remove the additional space at the bottom of `textarea` */
+    @extend %input-textarea;
   }
   /* stylelint-enable no-descending-specificity */
 
@@ -261,15 +194,7 @@
       input[type="search"],
       input[type="tel"],
       input[type="text"])) {
-      width: calc(
-        (var(--maxlength))
-        * 1ch
-        + $INPUTTER_FIELD_PADDING_INLINE_START
-        + $INPUTTER_FIELD_PADDING_INLINE_END
-        + $INPUTTER_FIELD_BORDER_WIDTH
-        + $INPUTTER_FIELD_BORDER_WIDTH
-      );
-      font-family: $INPUTTER_MASK_FONT_FAMILY;
+      @extend %input-mask;
     }
 
     & .input-mask {
@@ -294,23 +219,12 @@
     }
 
     & ::slotted(input[type="text"]) {
-      font-weight: $INPUTTER_MASK_FONT_WEIGHT;
+      @extend %input-mask-text;
     }
   }
 
   & .validation {
-    display: flex;
-    align-items: center;
-    column-gap: $INPUTTER_VALIDATION_GAP;
-    width: fit-content;
-    margin-block-start: $INPUTTER_VALIDATION_MARGIN_BLOCK;
-    color: $INPUTTER_VALIDATION_WARNING_COLOR;
-    font-size: $INPUTTER_VALIDATION_FONT_SIZE;
-
-    & .icon {
-      width: $INPUTTER_VALIDATION_ICON_SIZE;
-      flex-shrink: 0;
-    }
+    @extend %input-validation;
   }
 
   & .helper {

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

@@ -1,4 +1,6 @@
-:host {
+@import "./inputter-extends.css";
+
+light-dom {
   /* NOTE: targeting Safari only */
   @media not all and (min-resolution: 0.001dpcm) { /* stylelint-disable-line media-feature-range-notation */
     /*
@@ -61,4 +63,154 @@
       width: 2rem;
     }
   }
+
+  & label {
+    @extend %label;
+  }
+
+  & *::placeholder {
+    @extend %placeholder;
+  }
+
+  & :is(
+  input[type="date"],
+  input[type="email"],
+  input[type="number"],
+  input[type="password"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="text"],
+  select,
+  textarea) {
+    @extend %input;
+  }
+
+  & :is(
+  input[type="date"]:hover,
+  input[type="email"]:hover,
+  input[type="number"]:hover,
+  input[type="password"]:hover,
+  input[type="search"]:hover,
+  input[type="tel"]:hover,
+  input[type="text"]:hover,
+  select:hover,
+  textarea:hover) {
+    @extend %input-hover;
+  }
+
+  & :is(
+  input[type="date"]:focus,
+  input[type="email"]:focus,
+  input[type="number"]:focus,
+  input[type="password"]:focus,
+  input[type="search"]:focus,
+  input[type="tel"]:focus,
+  input[type="text"]:focus,
+  select:focus,
+  textarea:focus) {
+    @extend %input-focus;
+  }
+
+  /* @TODO: configure how to remove if disable off */
+  & :is(
+    input[type="date"]:disabled,
+    input[type="email"]:disabled,
+    input[type="number"]:disabled,
+    input[type="password"]:disabled,
+    input[type="search"]:disabled,
+    input[type="tel"]:disabled,
+    input[type="text"]:disabled,
+    select:disabled,
+    textarea:disabled
+  ) {
+    @extend %input-disabled;
+  }
+
+  & *:disabled::placeholder {
+    @extend %placeholder-disabled;
+  }
+
+  & :is(
+    input[type="checkbox"],
+    input[type="radio"]
+  ) {
+    @extend %input-multiple;
+  }
+
+  & :is(
+    input[type="checkbox"]:hover,
+    input[type="radio"]:hover
+  ) {
+    @extend %input-multiple-hover;
+  }
+
+  & :is(
+    input[type="checkbox"]:focus-visible,
+    input[type="radio"]:focus-visible
+  ) {
+    @extend %input-multiple-focus;
+  }
+
+  /* @TODO: configure how to remove if disable off */
+  & :is(
+    input[type="checkbox"]:disabled,
+    input[type="radio"]:disabled
+  ) {
+    @extend %input-multiple-disabled;
+  }
+
+  & input[type="checkbox"] {
+    @extend %input-checkbox;
+  }
+
+  & input[type="radio"] {
+    @extend %input-radio;
+  }
+
+  & input[type="radio"]:checked::before {
+    @extend %input-radio-checked-before;
+  }
+
+  & input[type="checkbox"]:checked::before {
+    @extend %input-checkbox-checked-before;
+  }
+
+  & :is(input[type="checkbox"], input[type="radio"]) + label {
+    @extend %label-multiple;
+  }
+
+  & :is(input[type="checkbox"], input[type="radio"]) + label:hover {
+    @extend %label-multiple-hover;
+  }
+
+  & :is(
+    select,
+    input[type="date"]
+  ) {
+    @extend %input-select;
+  }
+
+  & input[type="search"] {
+    @extend %input-search;
+  }
+
+  & textarea {
+    @extend %input-textarea;
+  }
+
+  &[mask] {
+    & :is(
+      input[type="email"],
+      input[type="number"],
+      input[type="search"],
+      input[type="tel"],
+      input[type="text"]
+    ) {
+      @extend %input-mask;
+    }
+
+    & input[type="text"] {
+      @extend %input-mask-text;
+    }
+  }
 }

package/muon-element/index.js

@@ -47,45 +47,54 @@ export const MuonElementMixin = (superClass) => class extends superClass {
         return undefined;
       }
 
-      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 `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
-      if (parentNodeType === '#document-fragment') {
-        // If it is within a shadowDom
-        let stylesAdded;
-
-        if (supportsAdoptingStyleSheets) {
-          const stylesheet = new CSSStyleSheet();
-
-          stylesheet.replaceSync(clonedCSS.cssText);
-          stylesAdded = [...parentNode.adoptedStyleSheets, stylesheet];
-        } else {
-          stylesAdded = [clonedCSS];
-        }
-
-        adoptStyles(parentNode, stylesAdded);
-      } else if (parentNodeType === '#document') {
-        // If it is in the parent DOM
-        const styleSheets = parentNode.styleSheets;
-
-        if (!Array.from(checkSheets(styleSheets, styleName)).length > 0) {
-          const style = document.createElement('style');
-          style.innerHTML = String.raw`${clonedCSS.cssText}`;
-          style.title = styleName;
-          document.head.appendChild(style);
+      const addStyles = (css, key = 0) => {
+        const clonedCSS = Object.assign({}, css);
+        const nodeName = this.nodeName.toLowerCase();
+        const parentNode = this.getRootNode();
+        const parentNodeType = parentNode.nodeName;
+        const styleName = key > 0 ? `${nodeName}-styles-${key}` : `${nodeName}-styles`;
+
+        // 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
+        if (parentNodeType === '#document-fragment') {
+          // If it is within a shadowDom
+          let stylesAdded;
+
+          if (supportsAdoptingStyleSheets) {
+            const stylesheet = new CSSStyleSheet();
+
+            stylesheet.replaceSync(clonedCSS.cssText);
+            stylesAdded = [...parentNode.adoptedStyleSheets, stylesheet];
+          } else {
+            stylesAdded = [clonedCSS];
+          }
+
+          adoptStyles(parentNode, stylesAdded);
+        } else if (parentNodeType === '#document') {
+          // If it is in the parent DOM
+          const styleSheets = parentNode.styleSheets;
+
+          if (!Array.from(checkSheets(styleSheets, styleName)).length > 0) {
+            const style = document.createElement('style');
+            style.innerHTML = String.raw`${clonedCSS.cssText}`;
+            style.title = styleName;
+            document.head.appendChild(style);
+          }
         }
+      };
+
+      if (Array.isArray(css)) {
+        css.forEach((style, key) => {
+          addStyles(style, key);
+        });
+      } else {
+        addStyles(css);
       }
 
-      return clonedCSS;
-
+      return true;
     });
     return undefined;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-199-2e0610f.0",
+  "version": "0.0.2-experimental-201-38f9ea8.0",
   "description": "",
   "main": "index.js",
   "scripts": {

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

@@ -4,7 +4,7 @@ export const snapshots = {};
 snapshots["icon implements standard self"] = 
 `<div
   aria-hidden="true"
-  class="icon standard"
+  class="arrow-right icon"
 >
 </div>
 `;
@@ -13,7 +13,7 @@ snapshots["icon implements standard self"] =
 snapshots["icon no anonymous slot"] = 
 `<div
   aria-hidden="true"
-  class="icon standard"
+  class="arrow-right icon"
 >
 </div>
 `;
@@ -32,7 +32,7 @@ snapshots["icon implements icon size"] =
 snapshots["icon select icon name"] = 
 `<div
   aria-hidden="true"
-  class="icon standard"
+  class="arrow-left icon"
 >
 </div>
 `;
@@ -51,7 +51,7 @@ snapshots["icon fails gracefully when using non existent type"] =
 snapshots["icon fails gracefully when using non existent name"] = 
 `<div
   aria-hidden="true"
-  class="icon standard"
+  class="icon this-does-not-exist-as-an-icon-sad-face"
 >
 </div>
 `;
@@ -71,7 +71,7 @@ snapshots["icon adds aria-label when describe used"] =
 snapshots["icon adds attributes for when describe used"] = 
 `<div
   aria-label="foobar"
-  class="icon standard"
+  class="arrow-right icon"
   role="img"
 >
 </div>
@@ -81,7 +81,7 @@ snapshots["icon adds attributes for when describe used"] =
 snapshots["icon caches not available"] = 
 `<div
   aria-hidden="true"
-  class="icon standard"
+  class="arrow-right icon"
 >
 </div>
 `;

package/tests/components/icon/icon.test.js

@@ -32,7 +32,7 @@ describe('icon', () => {
     expect(elementSVG).to.not.be.null; // eslint-disable-line no-unused-expressions
     expect(el.type).to.equal('standard', '`type` property has default value `standard`');
     expect(el.name).to.equal('arrow-right', '`name` property has default value `arrow-right`');
-    expect(Array.from(icon.classList)).to.deep.equal(['icon', 'standard'], 'class list for parent div');
+    expect(Array.from(icon.classList)).to.deep.equal(['icon', 'arrow-right'], 'class list for parent div');
     expect(icon.getAttribute('aria-hidden')).to.equal('true', '`aria-hidden` attribute added to not be seen by screen readers');
     expect(icon.getAttribute('aria-label')).to.equal(null, '`aria-label` not added');
     expect(icon.getAttribute('role')).to.equal(null, 'no `role` attribute added');