@muonic/muon 0.0.2-beta.3 → 0.0.2-beta.30

package/CHANGELOG.md

@@ -2,6 +2,149 @@
 
 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.30](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.29...v0.0.2-beta.30) (2023-07-24)
+
+### [0.0.2-beta.29](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.28...v0.0.2-beta.29) (2023-07-20)
+
+### [0.0.2-beta.28](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.27...v0.0.2-beta.28) (2023-07-14)
+
+
+### Bug Fixes
+
+* when no type or autocomplete ([480f989](https://github.com/centrica-engineering/muon/commit/480f989ab75a0496758af4af2364484093abded5))
+
+### [0.0.2-beta.27](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.26...v0.0.2-beta.27) (2023-07-12)
+
+
+### Features
+
+* inputter wrapper max-width ([194e0f0](https://github.com/centrica-engineering/muon/commit/194e0f0ee326188fb7041c3d7b59661b78fc7112))
+
+### [0.0.2-beta.26](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.25...v0.0.2-beta.26) (2023-07-10)
+
+
+### Bug Fixes
+
+* light dom setup ([531aae1](https://github.com/centrica-engineering/muon/commit/531aae1e85f4cb94c3aa02a857aa4ce354221ace))
+
+### [0.0.2-beta.25](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.24...v0.0.2-beta.25) (2023-07-05)
+
+### [0.0.2-beta.24](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.23...v0.0.2-beta.24) (2023-07-04)
+
+### [0.0.2-beta.23](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.22...v0.0.2-beta.23) (2023-07-04)
+
+### [0.0.2-beta.22](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.21...v0.0.2-beta.22) (2023-06-15)
+
+
+### Bug Fixes
+
+* styles only for boolean attributes ([a0c4de3](https://github.com/centrica-engineering/muon/commit/a0c4de35b78b5e78ae6a9bcba35904cb1e7bc8e1))
+
+### [0.0.2-beta.21](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.20...v0.0.2-beta.21) (2023-06-08)
+
+### [0.0.2-beta.20](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.19...v0.0.2-beta.20) (2023-06-06)
+
+
+### Bug Fixes
+
+* pull back width and font default styles ([9afa041](https://github.com/centrica-engineering/muon/commit/9afa0419ebb9475d31506da795e12a8a123291a1))
+
+### [0.0.2-beta.19](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.18...v0.0.2-beta.19) (2023-06-05)
+
+
+### Features
+
+* nested import ([a5cb81c](https://github.com/centrica-engineering/muon/commit/a5cb81ca28b041af98728bce26726d3a214c4c28))
+
+### [0.0.2-beta.18](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.17...v0.0.2-beta.18) (2023-06-05)
+
+
+### Bug Fixes
+
+* finding all component files ([1216b2f](https://github.com/centrica-engineering/muon/commit/1216b2f45347220bd19c521c3dd5c196dba38200))
+
+### [0.0.2-beta.17](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.16...v0.0.2-beta.17) (2023-05-31)
+
+
+### Bug Fixes
+
+* switch to light-dom ([5e1c67b](https://github.com/centrica-engineering/muon/commit/5e1c67bbb9be239a0717103685be0a2e24e51990))
+
+### [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)
+
+
+### Features
+
+* include lineLength token ([f5d00f9](https://github.com/centrica-engineering/muon/commit/f5d00f94078e7f49d055c9b42da041fa95c788ee))
+
+
+### Bug Fixes
+
+* commands ([351c59e](https://github.com/centrica-engineering/muon/commit/351c59e3e98d1aa2181ae3a6e498ee6fcb3ea891))
+* default ([c766154](https://github.com/centrica-engineering/muon/commit/c766154159d7c4c8fcca59ed2d096bdbcf5d94c2))
+* snapshots ([444b5ba](https://github.com/centrica-engineering/muon/commit/444b5bae280c962909088d2abc24b10b18170193))
+
+### [0.0.2-beta.13](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.12...v0.0.2-beta.13) (2023-05-15)
+
+### [0.0.2-beta.12](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.11...v0.0.2-beta.12) (2023-05-09)
+
+### [0.0.2-beta.11](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.10...v0.0.2-beta.11) (2023-05-05)
+
+
+### Bug Fixes
+
+* revert dev-storybook ([1b7d07b](https://github.com/centrica-engineering/muon/commit/1b7d07b97456efcbb774ea15da3ae7e3dac52aa2))
+
+### [0.0.2-beta.10](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.9...v0.0.2-beta.10) (2023-05-04)
+
+
+### Bug Fixes
+
+* move adding lightdom on perform ([41e7843](https://github.com/centrica-engineering/muon/commit/41e7843f57342e84d719a86a34de0ce1862081dc))
+
+### [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)
+
+
+### Bug Fixes
+
+* check if parentElement exists ([2055f37](https://github.com/centrica-engineering/muon/commit/2055f377a03194ebd28fa74f38597dca8e612507))
+* loading and disabled cta ([0569563](https://github.com/centrica-engineering/muon/commit/056956309c202557ac708e17ad4ed5a5760c3887))
+* url state ([023fb86](https://github.com/centrica-engineering/muon/commit/023fb86886cf9d0dbe432fbae1b97e3cb220d5d8))
+
+### [0.0.2-beta.7](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.6...v0.0.2-beta.7) (2023-04-04)
+
+### [0.0.2-beta.6](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.5...v0.0.2-beta.6) (2023-03-28)
+
+
+### Features
+
+* postcss extend ([7608e26](https://github.com/centrica-engineering/muon/commit/7608e26e1f1876abacbca562fb6724bebc0cbf50))
+
+### [0.0.2-beta.5](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.4...v0.0.2-beta.5) (2023-02-27)
+
+
+### Features
+
+* global styles ([6705c22](https://github.com/centrica-engineering/muon/commit/6705c224f7664e1ab6ad9d7261921474de1bf0fc))
+
+### [0.0.2-beta.4](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.3...v0.0.2-beta.4) (2023-02-23)
+
+
+### Features
+
+* config extend style dictionary ([70bbdc7](https://github.com/centrica-engineering/muon/commit/70bbdc7d7cae3e103da8420d1699c6143d833c07))
+
+
+### Bug Fixes
+
+* enable style dictionary extension ([d718dd9](https://github.com/centrica-engineering/muon/commit/d718dd93676976d0b4fcb25acb7572b15c5d05c5))
+
 ### [0.0.2-beta.3](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.2...v0.0.2-beta.3) (2023-02-21)
 
 

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/card/src/card-styles.css

@@ -5,10 +5,10 @@
 
   & .card {
     background-color: $CARD_BACKGROUND_COLOR;
-    border-width: 2px;
-    border-style: solid;
+    border-width: $CARD_BORDER_WIDTH;
+    border-style: $CARD_BORDER_STYLE;
     border-color: $CARD_BORDER_COLOR;
-    border-radius: 0;
+    border-radius: $CARD_BORDER_RADIUS;
     overflow: hidden;
   }
 

package/components/card/src/design-tokens.json

@@ -28,6 +28,18 @@
       "color": {
         "description": "Border color. Inherits the text color.",
         "value": "{ card.color.value }"
+      },
+      "width": {
+        "description": "Border width.",
+        "value": "2px"
+      },
+      "radius": {
+        "description": "Border radius.",
+        "value": "0"
+      },
+      "style": {
+        "description": "Border style.",
+        "value": "solid"
       }
     }
   }

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

@@ -1,4 +1,4 @@
-import { MuonElement, html, classMap, styleMap, ScopedElementsMixin, literal, staticHTML, ifDefined } from '@muonic/muon';
+import { MuonElement, html, classMap, styleMap, ScopedElementsMixin, literal, staticHTML } from '@muonic/muon';
 import { Icon } from '@muon/components/icon';
 import {
   CTA_CONFIG_TYPE,
@@ -25,9 +25,9 @@ export class Cta extends ScopedElementsMixin(MuonElement) {
 
   static get properties() {
     return {
-      loading: { type: Boolean },
+      loading: { type: Boolean, reflect: true },
       loadingMessage: { type: String, attribute: 'loading-message' },
-      disabled: { type: Boolean },
+      disabled: { type: Boolean, reflect: true },
       icon: { type: String },
       href: { type: String },
       _iconPosition: { type: String, state: true },
@@ -51,7 +51,7 @@ export class Cta extends ScopedElementsMixin(MuonElement) {
 
   get classes() {
     const parentElement = this.parentElement;
-    const isDisabled = parentElement.getAttribute('disabled') || this.disabled;
+    const isDisabled = parentElement?.getAttribute('disabled') || this.disabled;
 
     return {
       cta: true,
@@ -100,7 +100,7 @@ export class Cta extends ScopedElementsMixin(MuonElement) {
     const isInLink = parentName === 'A';
     const isInBtn = parentName === 'BUTTON';
     const isInNativeForm = parentName === 'FORM';
-    const isDisabled = parentElement.getAttribute('disabled') || this.disabled;
+    const isDisabled = parentElement?.getAttribute('disabled') || this.disabled;
     let element = this.href?.length > 0 ? 'a' : 'div';
 
     if (
@@ -109,23 +109,35 @@ export class Cta extends ScopedElementsMixin(MuonElement) {
       !isInLink &&
       !isInBtn &&
       !isDisabled &&
+      !this.loading &&
       !this._isButton
     ) {
       if (!this.getAttribute('role')) {
         this.setAttribute('role', 'button');
       }
 
-      if (!this.getAttribute('tabindex')) {
-        this.setAttribute('tabindex', '0');
-      }
+      this.setAttribute('tabindex', '0');
     }
 
-    if (isDisabled) {
+    if (isDisabled || this.loading) {
       if (!this.getAttribute('aria-disabled')) {
         this.setAttribute('aria-disabled', 'true');
       }
+
+      this.setAttribute('tabindex', '-1');
     } else {
       this.removeAttribute('aria-disabled');
+
+      if (
+        this.getAttribute('tabindex') === '-1' &&
+        (this._isButton ||
+        isInBtn ||
+        isInNativeForm ||
+        isInLink ||
+        element === 'a')
+      ) {
+        this.removeAttribute('tabindex');
+      }
     }
 
     if (isInNativeForm || this._isButton) {
@@ -137,14 +149,11 @@ export class Cta extends ScopedElementsMixin(MuonElement) {
       this.removeAttribute('tabindex');
     }
 
-    // eslint-disable-next-line no-nested-ternary
-    const tabIndex = isInLink ? -1 : element !== 'div' ? 0 : undefined;
-
     // eslint-disable-next-line no-nested-ternary
     const elementTag = element === 'button' ? literal`button` : element === 'a' ? literal`a` : literal`div`;
 
     return staticHTML`
-      <${elementTag} .href=${element === 'a' && this.href} ?disabled=${element === 'button' && (this.loading || this.disabled)} tabindex="${ifDefined(tabIndex)}" aria-label="${this.textContent}" class=${classMap(this.classes)} style=${styleMap(this.inlineStyles)}>
+      <${elementTag} .href=${element === 'a' && this.href} ?disabled=${element === 'button' && (this.loading || this.disabled)} aria-label="${this.textContent}" class=${classMap(this.classes)} style=${styleMap(this.inlineStyles)}>
         ${content}
       </${elementTag}>
     `;

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

@@ -37,9 +37,9 @@
     background-color: $CTA_BACKGROUND_COLOR;
     color: $CTA_COLOR;
     border-color: $CTA_BORDER_COLOR;
-    border-width: 2px;
-    border-style: solid;
-    border-radius: 10px;
+    border-width: $CTA_BORDER_WIDTH;
+    border-style: $CTA_BORDER_STYLE;
+    border-radius: $CTA_BORDER_RADIUS;
 
     &:hover {
       background-color: $CTA_HOVER_BACKGROUND_COLOR;
@@ -82,8 +82,8 @@
     }
 
     & .label-holder {
-      min-inline-size: 10em;
-      max-inline-size: 32em;
+      min-inline-size: $CTA_LABEL_MIN_WIDTH;
+      max-inline-size: $CTA_LABEL_MAX_WIDTH;
     }
 
     & .icon {
@@ -96,9 +96,10 @@
 
 /* TODO: move these `[disabled]` and `[loading]` styles to default.css */
 
+/* NOTE: We add `=""` to enforce styles only for booleans */
 /* stylelint-disable no-descending-specificity */
-:host([disabled]),
-:host([loading]) {
+:host([disabled=""]),
+:host([loading=""]) {
   cursor: auto;
   pointer-events: none;
 }

package/components/cta/src/design-tokens.json

@@ -28,6 +28,18 @@
       "color": {
         "description": "Border color. Inherits the background color.",
         "value": "{ cta.background.color.value }"
+      },
+      "width": {
+        "description": "Border width.",
+        "value": "2px"
+      },
+      "radius": {
+        "description": "Border radius.",
+        "value": "10px"
+      },
+      "style": {
+        "description": "Border style.",
+        "value": "solid"
       }
     },
     "loading": {
@@ -72,6 +84,16 @@
         "value": "{ theme.size.md.value }"
       }
     },
+    "label": {
+      "minWidth": {
+        "description": "The minimum width of the label.",
+        "value": "15ch"
+      },
+      "maxWidth": {
+        "description": "The maximum width of the label.",
+        "value": "{ theme.font.lineLength.value }"
+      }
+    },
     "font": {
       "family": {
         "description": "Font family which defaults to sans-serif.",

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

@@ -1,4 +1,4 @@
-import { MuonElement, css, unsafeCSS } from '@muonic/muon';
+import { MuonElement } from '@muonic/muon';
 import { DetailMixin } from '@muon/mixins/detail-mixin';
 import styles from './detail-styles.css';
 import {
@@ -22,6 +22,6 @@ export class Detail extends DetailMixin(MuonElement) {
   }
 
   static get styles() {
-    return css`${unsafeCSS(styles)}`;
+    return styles;
   }
 }

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

@@ -1,4 +1,4 @@
-import { html, MuonElement, css, unsafeCSS } from '@muonic/muon';
+import { html, MuonElement } from '@muonic/muon';
 import scrollTo from '@muon/utils/scroll';
 import styles from './form-styles.css';
 
@@ -17,7 +17,7 @@ export class Form extends MuonElement {
   }
 
   static get styles() {
-    return css`${unsafeCSS(styles)}`;
+    return styles;
   }
 
   connectedCallback() {
@@ -73,7 +73,7 @@ export class Form extends MuonElement {
       !this._resetButton.loading
     ) {
       this._nativeForm.reset();
-      Array.from(this._nativeForm.elements).forEach((element) => {
+      Array.from(this._elements).forEach((element) => {
         const componentElement = this._findInputElement(element);
         if (componentElement !== element) {
           componentElement.reset?.();
@@ -111,6 +111,10 @@ export class Form extends MuonElement {
     return validity.isValid;
   }
 
+  get _elements() {
+    return this._nativeForm.elements;
+  }
+
   get _nativeForm() {
     return this.querySelector('form');
   }
@@ -142,7 +146,7 @@ export class Form extends MuonElement {
   validate() {
     let isValid = true;
     // @TODO: Check how this works with form associated
-    const validationStates = Array.from(this._nativeForm.elements).reduce((acc, element) => {
+    const validationStates = Array.from(this._elements).reduce((acc, element) => {
       element = this._findInputElement(element);
       const { name } = element;
       const hasBeenSet = acc.filter((el) => el.name === name).length > 0;

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

@@ -24,7 +24,7 @@ export class Icon extends MuonElement {
       describe: { type: String },
       size: { type: Number },
       category: { type: String },
-      url: { type: String, state: true }
+      _url: { type: String, state: true }
     };
   }
 
@@ -39,14 +39,14 @@ export class Icon extends MuonElement {
     this.name = ICON_CONFIG_NAME;
     this.category = ICON_CONFIG_CATEGORY;
     this.allSizes = ICON_CONFIG_SIZES;
-    this.url = ICON_CONFIG_URL;
+    this._url = ICON_CONFIG_URL;
     this.describe = '';
   }
 
   get classes() {
     return {
       icon: true,
-      [this.type]: true
+      [this.name]: true
     };
   }
 
@@ -81,7 +81,7 @@ export class Icon extends MuonElement {
 
     return html`
       <div aria-hidden=${ifDefined(hidden)} role=${ifDefined(role)} aria-label=${ifDefined(role && this.describe)} class=${classMap(this.classes)} style=${styleMap(this.inlineStyles)}>
-        ${svgLoader({ name: this.name, category: this.category, path: this.url })}
+        ${svgLoader({ name: this.name, category: this.category, path: this._url })}
       </div>
     `;
   }