@mgdis/mg-components 4.2.1 → 5.1.0

package/dist/cjs/mg-components.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mg-badge_23.cjs",[[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1025,"title-pattern"],"titlePatternErrorMessage":[1025,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[1028,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classList":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classList":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classList":[32],"hasActions":[32]}],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classList":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"expanded":[1028]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1]}],[1,"mg-tag",{"variant":[1],"outline":[4],"classList":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-badge",{"value":[1032],"label":[1],"variant":[1],"outline":[4],"classList":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[6,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"form":[1025],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"expanded":[4],"controls":[1],"haspopup":[8],"loading":[32],"classList":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[6,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[1028]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"spin":[4],"classList":[32]}]]],["mg-modal.cjs",[[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[1028,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]]]],["mg-popover.cjs",[[6,"mg-popover",{"identifier":[1],"placement":[1],"closeButton":[4,"close-button"],"display":[1028],"disabled":[1028]}]]]], options);
+  return index.bootstrapLazy([["mg-badge_27.cjs",[[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1025,"title-pattern"],"titlePatternErrorMessage":[1025,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[1028,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classList":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classList":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classList":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[1028,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-popover",{"identifier":[1],"placement":[1],"closeButton":[4,"close-button"],"display":[1028],"disabled":[1028]}],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classList":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-card"],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-tag",{"variant":[1],"outline":[4],"classList":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-badge",{"value":[1032],"label":[1],"variant":[1],"outline":[4],"classList":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[1028,"full-width"],"form":[1025],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classList":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[1028]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"spin":[4],"classList":[32]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -2,7 +2,9 @@
   "entries": [
     "./components/atoms/mg-badge/mg-badge.js",
     "./components/atoms/mg-button/mg-button.js",
+    "./components/atoms/mg-card/mg-card.js",
     "./components/atoms/mg-character-left/mg-character-left.js",
+    "./components/atoms/mg-divider/mg-divider.js",
     "./components/atoms/mg-icon/mg-icon.js",
     "./components/atoms/mg-input-title/mg-input-title.js",
     "./components/atoms/mg-tag/mg-tag.js",

package/dist/collection/components/atoms/mg-badge/mg-badge.js

@@ -24,9 +24,7 @@ export class MgBadge {
   }
   validateLabel(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      // TODO: throw new Error on next major (5.0.0)
-      // throw new Error('<mg-badge> prop "label" is required.');
-      console.error('<mg-badge> prop "label" is required.');
+      throw new Error('<mg-badge> prop "label" is required.');
     }
   }
   validateVariant(newValue, oldValue) {

package/dist/collection/components/atoms/mg-button/doc/mg-button.stories.js

@@ -36,9 +36,8 @@ MgButton.args = {
   disabled: false,
   disableOnClick: false,
   isIcon: false,
-  expanded: false,
-  controls: undefined,
   type: undefined,
+  fullWidth: undefined,
 };
 export const IsIcon = Template.bind({});
 IsIcon.args = Object.assign(Object.assign({}, MgButton.args), { isIcon: true, slot: h("mg-icon", { icon: Object.keys(icons)[0] }) });

package/dist/collection/components/atoms/mg-button/mg-button.css

@@ -1,110 +1,154 @@
 /* Variables */
 /* Mixins */
-/* Styles */
-.mg-button {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  column-gap: 0.6rem;
-  padding: calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;
-  min-height: var(--default-size);
-  box-sizing: border-box;
-  border-top-right-radius: var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));
-  border-top-left-radius: var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));
-  border-bottom-right-radius: var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));
-  border-bottom-left-radius: var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));
-  cursor: pointer;
-  background-image: none;
-  border-top-width: var(--mg-button-border-top-width, 0.1rem);
-  border-right-width: var(--mg-button-border-right-width, 0.1rem);
-  border-bottom-width: var(--mg-button-border-bottom-width, 0.1rem);
-  border-left-width: var(--mg-button-border-left-width, 0.1rem);
-  border-style: solid;
-  font-family: inherit;
-  text-decoration: none;
-  font-weight: normal;
-  text-align: left;
-  touch-action: manipulation;
+:host {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 100%;
 }
-.mg-button[disabled], .mg-button[aria-disabled=true], .mg-button.disabled {
-  opacity: var(--mg-button-disabled-opacity);
-  cursor: default;
+
+:host(:focus-visible) {
+  outline: 0;
 }
-.mg-button.mg-button--icon {
-  padding: 0;
-  justify-content: center;
-  width: var(--default-size);
-  height: var(--default-size);
-  border-top-right-radius: var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));
-  border-top-left-radius: var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));
-  border-bottom-right-radius: var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));
-  border-bottom-left-radius: var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));
-  font-size: var(--font-size);
-  line-height: var(--font-size);
+:host(:focus-visible) .mg-button:not(.mg-button--disabled) {
+  outline-color: -webkit-focus-ring-color;
+  outline-style: auto;
+  outline-width: 0.2rem;
 }
+
+:host(:hover) .mg-button--flat:not(.mg-button--disabled),
+:host(:focus) .mg-button--flat:not(.mg-button--disabled),
+:host(:active) .mg-button--flat:not(.mg-button--disabled) {
+  background: hsla(var(--color-dark), 0.1);
+}
+
+:host([full-width]) {
+  display: block;
+}
+
 .mg-button.mg-button--primary {
   border-color: hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));
   color: hsl(var(--mg-button-primary-font-color));
   background: linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)));
 }
-.mg-button.mg-button--primary:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--primary:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--primary:active:not([disabled], [aria-disabled=true], .disabled) {
+
+:host(:hover) .mg-button--primary:not(.mg-button--disabled),
+:host(:focus) .mg-button--primary:not(.mg-button--disabled),
+:host(:active) .mg-button--primary:not(.mg-button--disabled) {
   background: hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));
 }
+
 .mg-button.mg-button--secondary {
   border-color: hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));
   color: hsl(var(--mg-button-secondary-font-color));
   background: linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)));
 }
-.mg-button.mg-button--secondary:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--secondary:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--secondary:active:not([disabled], [aria-disabled=true], .disabled) {
+
+:host(:hover) .mg-button--secondary:not(.mg-button--disabled),
+:host(:focus) .mg-button--secondary:not(.mg-button--disabled),
+:host(:active) .mg-button--secondary:not(.mg-button--disabled) {
   background: hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));
 }
+
 .mg-button.mg-button--danger {
   border-color: hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));
   color: hsl(var(--color-neutral));
   background: linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)));
 }
-.mg-button.mg-button--danger:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--danger:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--danger:active:not([disabled], [aria-disabled=true], .disabled) {
+
+:host(:hover) .mg-button--danger:not(.mg-button--disabled),
+:host(:focus) .mg-button--danger:not(.mg-button--disabled),
+:host(:active) .mg-button--danger:not(.mg-button--disabled) {
   background: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
 }
+
 .mg-button.mg-button--danger-alt {
   border-color: hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));
   color: hsl(var(--color-danger));
   background: linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)));
 }
-.mg-button.mg-button--danger-alt:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--danger-alt:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--danger-alt:active:not([disabled], [aria-disabled=true], .disabled) {
+
+:host(:hover) .mg-button--danger-alt:not(.mg-button--disabled),
+:host(:focus) .mg-button--danger-alt:not(.mg-button--disabled),
+:host(:active) .mg-button--danger-alt:not(.mg-button--disabled) {
   background: hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));
 }
+
 .mg-button.mg-button--info {
   border-color: hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));
   color: hsl(var(--color-neutral));
   background: linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)));
 }
-.mg-button.mg-button--info:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--info:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--info:active:not([disabled], [aria-disabled=true], .disabled) {
+
+:host(:hover) .mg-button--info:not(.mg-button--disabled),
+:host(:focus) .mg-button--info:not(.mg-button--disabled),
+:host(:active) .mg-button--info:not(.mg-button--disabled) {
   background: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
 }
+
 .mg-button.mg-button--success {
   border-color: hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));
   color: hsl(var(--color-dark));
   background: linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)));
 }
-.mg-button.mg-button--success:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--success:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--success:active:not([disabled], [aria-disabled=true], .disabled) {
+
+:host(:hover) .mg-button--success:not(.mg-button--disabled),
+:host(:focus) .mg-button--success:not(.mg-button--disabled),
+:host(:active) .mg-button--success:not(.mg-button--disabled) {
   background: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
 }
+
+/* Styles */
+.mg-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  column-gap: 0.6rem;
+  padding: calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;
+  min-height: var(--default-size);
+  box-sizing: border-box;
+  border-top-right-radius: var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));
+  border-top-left-radius: var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));
+  border-bottom-right-radius: var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));
+  border-bottom-left-radius: var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));
+  cursor: pointer;
+  background-image: none;
+  border-top-width: var(--mg-button-border-top-width, 0.1rem);
+  border-right-width: var(--mg-button-border-right-width, 0.1rem);
+  border-bottom-width: var(--mg-button-border-bottom-width, 0.1rem);
+  border-left-width: var(--mg-button-border-left-width, 0.1rem);
+  border-style: solid;
+  text-decoration: none;
+  font-family: inherit;
+  font-weight: var(--mg-button-font-weight, normal);
+  text-align: left;
+  font-size: var(--font-size);
+  touch-action: manipulation;
+}
+.mg-button.mg-button--disabled {
+  opacity: var(--mg-button-disabled-opacity);
+  cursor: default;
+}
+.mg-button.mg-button--icon {
+  padding: 0;
+  justify-content: center;
+  width: var(--default-size);
+  height: var(--default-size);
+  border-top-right-radius: var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));
+  border-top-left-radius: var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));
+  border-bottom-right-radius: var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));
+  border-bottom-left-radius: var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));
+  font-size: var(--font-size);
+  line-height: var(--font-size);
+}
 .mg-button.mg-button--flat {
   background: none;
   border: none;
 }
-.mg-button.mg-button--flat:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--flat:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--flat:active:not([disabled], [aria-disabled=true], .disabled) {
-  background: hsla(var(--color-dark), 0.1);
-}
-.mg-button mg-icon:only-child,
-.mg-button ::slotted(mg-icon) {
-  display: inline-flex;
-  flex-shrink: 0;
-  line-height: 1;
-  margin: auto 0;
+.mg-button.mg-button--full-width {
+  display: flex;
+  justify-content: center;
 }
-.mg-button.mg-button--loading > mg-icon {
+.mg-button.mg-button--loading > mg-icon:first-of-type {
   position: absolute;
   left: 50%;
   top: 50%;
@@ -113,19 +157,21 @@
 .mg-button.mg-button--loading .mg-button__content {
   opacity: 0;
 }
-
-.mg-button__content {
+.mg-button mg-icon:only-child,
+.mg-button ::slotted(mg-icon) {
+  display: inline-flex;
+  flex-shrink: 0;
+  line-height: 1;
+  margin: auto 0;
+}
+.mg-button slot,
+.mg-button ::slotted(*:not(mg-icon)) {
+  text-decoration: none;
+  font-family: inherit;
+  font-weight: var(--mg-button-font-weight, normal);
+  text-align: left;
+  font-size: var(--font-size);
   display: flex;
   align-items: center;
   column-gap: 0.6rem;
-}
-
-mg-button {
-  display: inline-block;
-}
-
-.mg-button,
-mg-button {
-  vertical-align: middle;
-  max-width: 100%;
 }

package/dist/collection/components/atoms/mg-button/mg-button.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { variants } from './mg-button.conf';
 import { ClassList } from '../../../utils/components.utils';
 export class MgButton {
@@ -7,10 +7,17 @@ export class MgButton {
      * Internal *
      ************/
     this.onClickElementFn = null;
+    this.classDisabled = 'mg-button--disabled';
+    this.classLoading = 'mg-button--loading';
+    this.classFullWidth = 'mg-button--full-width';
     /**
      * Define button variant
      */
     this.variant = variants[0]; // Primary
+    /**
+     * Set button to full-width
+     */
+    this.fullWidth = false;
     /**
      * Define if button is round.
      * Used for icon button.
@@ -41,11 +48,38 @@ export class MgButton {
       if (this.disabled)
         event.stopPropagation();
       // Used to prevent multi-click.
-      if (this.disableOnClick && !this.disabled) {
+      else if (this.disableOnClick) {
         this.loading = true;
         this.disabled = true;
       }
     };
+    /**
+     * Handle onKeyDown event
+     *
+     * @param {KeyboardEvent} event keyboard event
+     * @returns {void}
+     */
+    this.handleKeydown = (event) => {
+      if (!this.disabled && event.key === ' ') {
+        event.preventDefault();
+      }
+      else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {
+        event.preventDefault();
+        this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      }
+    };
+    /**
+     * Handle onKeyUp event
+     *
+     * @param {KeyboardEvent} event keyboard event
+     * @returns {void}
+     */
+    this.handleKeyup = (event) => {
+      if (!this.disabled && event.key === ' ') {
+        event.preventDefault();
+        this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      }
+    };
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
@@ -58,6 +92,17 @@ export class MgButton {
       this.classList.add(`mg-button--${newValue}`);
     }
   }
+  validateFullWidth(newValue) {
+    if (newValue && this.isIcon) {
+      throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');
+    }
+    else if (newValue) {
+      this.classList.add(this.classFullWidth);
+    }
+    else {
+      this.classList.delete(this.classFullWidth);
+    }
+  }
   disabledHandler(isDisabled) {
     // Remove loading when enable
     // Will be set back onclick
@@ -66,14 +111,21 @@ export class MgButton {
     }
     // Manage if onclick
     this.element.onclick = isDisabled ? undefined : this.onClickElementFn;
+    // apply style
+    if (isDisabled) {
+      this.classList.add(this.classDisabled);
+    }
+    else {
+      this.classList.delete(this.classDisabled);
+    }
   }
   loadingHandler(newValue) {
     // we add loading style if it newvalue is true else we remove it
     if (newValue) {
-      this.classList.add('mg-button--loading');
+      this.classList.add(this.classLoading);
     }
     else {
-      this.classList.delete('mg-button--loading');
+      this.classList.delete(this.classLoading);
     }
   }
   /**
@@ -83,6 +135,7 @@ export class MgButton {
    */
   componentWillLoad() {
     this.validateVariant(this.variant);
+    this.validateFullWidth(this.fullWidth);
     if (this.isIcon) {
       this.classList.add(`mg-button--icon`);
       if (typeof this.label !== 'string' || this.label.trim() === '') {
@@ -99,13 +152,10 @@ export class MgButton {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (h("button", { id: this.identifier, class: this.classList.join(), type: this.type, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": this.controls, "aria-haspopup": this.haspopup !== undefined && this.haspopup.toString(), onClick: this.handleClick,
-      // has stencil does not support form attribute on button, we set the attribute from the ref
-      // https://github.com/ionic-team/stencil/issues/2703#issuecomment-1050943715
-      ref: btn => this.form && btn.setAttribute('form', this.form) }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null))));
+    return (h(Host, { role: "button", tabIndex: this.disabled ? -1 : 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, h("div", { class: this.classList.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null)))));
   }
   static get is() { return "mg-button"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["mg-button.scss"]
@@ -122,9 +172,14 @@ export class MgButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "VariantType",
+          "resolved": "\"danger\" | \"danger-alt\" | \"flat\" | \"info\" | \"primary\" | \"secondary\" | \"success\"",
+          "references": {
+            "VariantType": {
+              "location": "import",
+              "path": "./mg-button.conf"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -187,11 +242,29 @@ export class MgButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define button type\nDefault: 'submit', as HTMLButtonElement type is submit by default"
+          "text": "Define button type"
         },
         "attribute": "type",
         "reflect": false
       },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set button to full-width"
+        },
+        "attribute": "full-width",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "form": {
         "type": "string",
         "mutable": true,
@@ -261,57 +334,6 @@ export class MgButton {
         "attribute": "disable-on-click",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "expanded": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Prop to set aria-expanded on button element"
-        },
-        "attribute": "expanded",
-        "reflect": false
-      },
-      "controls": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Prop to set aria-controls on button element"
-        },
-        "attribute": "controls",
-        "reflect": false
-      },
-      "haspopup": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'",
-          "resolved": "\"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\" | boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Option to set aria-haspopup\nThe aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity."
-        },
-        "attribute": "haspopup",
-        "reflect": false
       }
     };
   }
@@ -326,6 +348,9 @@ export class MgButton {
     return [{
         "propName": "variant",
         "methodName": "validateVariant"
+      }, {
+        "propName": "fullWidth",
+        "methodName": "validateFullWidth"
       }, {
         "propName": "disabled",
         "methodName": "disabledHandler"

package/dist/collection/components/atoms/mg-card/doc/mg-card.stories.js

@@ -0,0 +1,18 @@
+import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
+export default {
+  component: 'mg-card',
+  title: 'Atoms/mg-card',
+};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("mg-card", Object.assign({}, filterArgs(args)), args.slot);
+export const MgCard = Template.bind({});
+MgCard.args = {
+  slot: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+};

package/dist/collection/components/atoms/mg-card/mg-card.css

@@ -0,0 +1,7 @@
+.mg-card {
+  padding: var(--mg-card-padding);
+  border-radius: var(--mg-card-border-radius);
+  background: var(--mg-card-background);
+  border: var(--mg-card-border);
+  box-shadow: var(--mg-card-box-shadow);
+}

package/dist/collection/components/atoms/mg-card/mg-card.js

@@ -0,0 +1,26 @@
+import { h } from '@stencil/core';
+export class MgCard {
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h("div", { class: "mg-card" }, h("slot", null)));
+  }
+  static get is() { return "mg-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-card.css"]
+    };
+  }
+}

package/dist/collection/components/atoms/mg-divider/doc/mg-divider.stories.js

@@ -0,0 +1,18 @@
+import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
+export default {
+  component: 'mg-divider',
+  title: 'Atoms/mg-divider',
+};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("mg-divider", Object.assign({}, filterArgs(args, { size: 'regular' })));
+export const MgDivider = Template.bind({});
+MgDivider.args = {
+  size: 'regular',
+};

package/dist/collection/components/atoms/mg-divider/mg-divider.css

@@ -0,0 +1,9 @@
+.mg-divider {
+  margin: var(--mg-divider-vertical-spacing) auto;
+  width: 12rem;
+  height: var(--mg-divider-thickness);
+  background-color: var(--mg-divider-background-color);
+}
+.mg-divider.mg-divider--full {
+  width: 100%;
+}