@mgdis/mg-components 5.18.0 → 5.19.1

package/dist/types/components.d.ts

@@ -14,6 +14,7 @@ import { CheckboxItem, CheckboxType, CheckboxValue, SectionKind } from "./compon
 import { Width } from "./components/molecules/inputs/MgInput.conf";
 import { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 import { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
+import { TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
 import { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
 import { IconType, SizeType, SlotLabelType } from "./components/molecules/mg-item-more/mg-item-more.conf";
 import { Direction, ItemMoreType, MenuSizeType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
@@ -34,6 +35,7 @@ export { CheckboxItem, CheckboxType, CheckboxValue, SectionKind } from "./compon
 export { Width } from "./components/molecules/inputs/MgInput.conf";
 export { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 export { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
+export { TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
 export { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
 export { IconType, SizeType, SlotLabelType } from "./components/molecules/mg-item-more/mg-item-more.conf";
 export { Direction, ItemMoreType, MenuSizeType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
@@ -318,6 +320,10 @@ export namespace Components {
           * Define if mg-input-checkbox-list is disabled
          */
         "disabled": boolean;
+        /**
+          * Define mg-input-checkbox input invalid
+         */
+        "invalid": boolean;
         /**
           * Define component message
          */
@@ -732,6 +738,10 @@ export namespace Components {
         "value": any;
     }
     interface MgInputText {
+        /**
+          * Define datalist options
+         */
+        "datalistoptions": string[];
         /**
           * Define if input is disabled
          */
@@ -821,7 +831,7 @@ export namespace Components {
         /**
           * Input type
          */
-        "type": 'text' | 'search';
+        "type": TextType;
         /**
           * Define input valid state
          */
@@ -936,6 +946,10 @@ export namespace Components {
           * Switch from label to fieldset sementic
          */
         "isLegend": boolean;
+        /**
+          * If input is required an asterisk is added at the end of the label
+         */
+        "readonly": boolean;
         /**
           * If input is required an asterisk is added at the end of the label
          */
@@ -986,6 +1000,12 @@ export namespace Components {
           * Define if input is readonly
          */
         "readonly": boolean;
+        /**
+          * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+          * @param valid - value indicating the validity
+          * @param errorMessage - the error message to display
+         */
+        "setError": (valid: boolean, errorMessage: string) => Promise<void>;
         /**
           * Add a tooltip message next to the input
          */
@@ -1879,6 +1899,10 @@ declare namespace LocalJSX {
           * Define if mg-input-checkbox-list is disabled
          */
         "disabled"?: boolean;
+        /**
+          * Define mg-input-checkbox input invalid
+         */
+        "invalid"?: boolean;
         /**
           * Define component message
          */
@@ -2287,6 +2311,10 @@ declare namespace LocalJSX {
         "value"?: any;
     }
     interface MgInputText {
+        /**
+          * Define datalist options
+         */
+        "datalistoptions"?: string[];
         /**
           * Define if input is disabled
          */
@@ -2370,7 +2398,7 @@ declare namespace LocalJSX {
         /**
           * Input type
          */
-        "type"?: 'text' | 'search';
+        "type"?: TextType;
         /**
           * Define input valid state
          */
@@ -2483,6 +2511,10 @@ declare namespace LocalJSX {
           * Switch from label to fieldset sementic
          */
         "isLegend"?: boolean;
+        /**
+          * If input is required an asterisk is added at the end of the label
+         */
+        "readonly"?: boolean;
         /**
           * If input is required an asterisk is added at the end of the label
          */

package/dist/types/utils/components.utils.d.ts

@@ -73,3 +73,9 @@ export declare const getParentWindows: (localWindow: Window, windows?: Window[])
  * @returns if string is valid
  */
 export declare const isValidString: (value: unknown) => boolean;
+/**
+ * Clean string caraters
+ * @param text - text to cliean
+ * @returns cleanded string
+ */
+export declare const cleanString: (text: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.18.0",
+  "version": "5.19.1",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -25,8 +25,8 @@
   "dependencies": {
     "@popperjs/core": "^2.11.7",
     "@stencil/core": "^4.3.0",
-    "normalize.css": "^8.0.1",
-    "@mgdis/img": "1.3.0"
+    "@mgdis/img": "1.3.0",
+    "@mgdis/styles": "1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -35,9 +35,8 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@playwright/test": "^1.x",
+    "@playwright/test": "1.39.0",
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
-    "@stencil/sass": "^1.5.2",
     "@storybook/addon-a11y": "^7.2.0",
     "@storybook/addon-actions": "^7.2.0",
     "@storybook/addon-essentials": "^7.2.0",
@@ -48,21 +47,20 @@
     "@storybook/html-webpack5": "^7.2.0",
     "@storybook/preset-scss": "^1.0.3",
     "@types/jest": "npm:@types/jest@^26",
-    "@types/jest-image-snapshot": "^4.3.2",
+    "@types/jest-image-snapshot": "^6.0.0",
     "@types/node": "^18.15.10",
-    "babel-loader": "^8.3.0",
+    "babel-loader": "^9.0.0",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
-    "chromatic": "^6.15.0",
-    "css-loader": "^5.2.7",
+    "chromatic": "^7.0.0",
+    "css-loader": "^6.0.0",
     "eslint": "^8.x",
     "eslint-plugin-storybook": "^0.6.13",
     "jest": "npm:jest@^26",
     "jest-cli": "npm:jest-cli@^26",
-    "jest-image-snapshot": "^4.5.1",
-    "jest-junit": "^15.0.0",
+    "jest-image-snapshot": "^6.0.0",
+    "jest-junit": "^16.0.0",
     "jest-transform-stub": "^2.0.0",
     "jsx-dom": "^8.0.4",
-    "npm-run-all": "^4.1.5",
     "prettier": "^2.8.4",
     "puppeteer": "^13.7.0",
     "react": "^18.2.0",
@@ -73,27 +71,28 @@
     "storybook": "^7.2.0",
     "style-loader": "^2.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5",
-    "@mgdis/linting-stencil": "1.1.0",
+    "typescript": "^5.0.0",
     "eslint-config-stencil": "1.1.1",
-    "playwright-config": "1.0.0",
-    "tsconfig": "1.0.0"
+    "@mgdis/linting-stencil": "1.1.0",
+    "tsconfig": "1.0.0",
+    "playwright-config": "1.0.0"
   },
   "license": "BSD-3-Clause",
   "scripts": {
     "prebuild": "node ./bin/build-icons",
     "build": "pnpm prebuild && stencil build --docs",
     "start": "pnpm prebuild && stencil build --dev --watch --serve",
-    "lint": "run-s lint:es lint:prettier",
-    "lint:fix": "run-s lint:es:fix lint:prettier:fix",
-    "lint:es": "eslint src/**/*.{ts,tsx}",
-    "lint:es:fix": "eslint src/**/*.{ts,tsx} --fix",
-    "lint:prettier": "prettier --check **/*.{ts,tsx,scss,html,mdx,json}",
-    "lint:prettier:fix": "prettier --write **/*.{ts,tsx,scss,html,mdx,json}",
+    "lint": "pnpm lint:es && pnpm lint:prettier",
+    "lint:fix": "pnpm lint:es:fix && pnpm lint:prettier:fix",
+    "lint:es": "eslint 'src/**/*.{ts,tsx}'",
+    "lint:es:fix": "eslint 'src/**/*.{ts,tsx}' --fix",
+    "lint:prettier": "prettier --check '**/*.{ts,tsx,html,mdx,json}'",
+    "lint:prettier:fix": "prettier --write '**/*.{ts,tsx,html,mdx,json}'",
     "test": "TZ=UTC stencil test --spec --e2e",
     "test:unit": "TZ=UTC stencil test --spec --collectCoverage",
     "test:e2e": "pnpm prebuild && stencil test --e2e --collectCoverage --collectCoverageFrom=\"src/**/*.e2e.ts\" --reporters=\"default\" --reporters=\"jest-junit\"",
     "test:e2e:playwright": "pnpm --package=@pnpm/@playwright/test dlx playwright test",
+    "test:e2e:playwright:docker": "pnpm dlx @playwright/test test",
     "test:watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "storybook": "storybook dev -p 6006",

package/readme.md

@@ -66,37 +66,6 @@ All of the MGDIS generated web components must use the prefix `mg`.
 
 You will find how to use the library instructions in the [Getting Started section](./getting-started.md).
 
-### Style
-
-#### Naming methodology
-
-MG Components is using [BEM](https://en.bem.info/) (Block, Element, Modifier) methodology with the [two dashes style](https://en.bem.info/methodology/naming-convention/#two-dashes-style) naming scheme.
-
-#### Declaration organisation
-
-When a selector contains too many declaration it is recommended to organize them by theme : Display, Decoration, Font, Others.
-
-```CSS
-.mg-button {
-  // Display
-  display: inline-block;
-  vertical-align: middle;
-  min-height: 3.5rem;
-  padding: 0.6rem 1.2rem;
-  // Decoration
-  background-image: none;
-  border-radius: 0.3rem;
-  border: 0.1rem solid transparent;
-  cursor: pointer;
-  // Font
-  font-weight: normal;
-  text-align: center;
-  white-space: nowrap;
-  // Others
-  touch-action: manipulation;
-}
-```
-
 ### Storybook
 
 The plugin [storybook-addon-docs-stencil

package/dist/cjs/mg-menu.conf-43aacf30.js.map

@@ -1 +0,0 @@
-{"file":"mg-menu.conf-43aacf30.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;MAOa,cAAc,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,QAAgB;EAC7E,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACvF,EAAE;AAEF;;;;;;MAMa,YAAY,GAAG,CAAC,MAAc,EAAE,MAAc;EACzD,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACtD,EAAE;AAEF;;;MAGa,UAAU,GAAG,gDAAgD;AAE1E;;;;;;MAMa,UAAU,GAAG,CAAC,IAAY,EAAE,MAAc;EACrD,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;IACrE,OAAO,EAAE,CAAC;GACX;EACD,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAChE,EAAE;AAEF;;;;;;;;AAQO,MAAM,iBAAiB,GAAG,CAAC,OAAoB,EAAE,QAAiB,EAAE,aAAqB;;EAE9F,MAAM,oBAAoB,GAAgB,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;EACpE,MAAM,WAAW,GAAa,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,IAAI,CAAC,CAAC;EAC/F,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,QAAQ,IAAI,aAAa,CAAC;;EAE7F,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;;EAE/C,OAAO;IACL,MAAM;IACN,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,IAAI,QAAQ,CAAC,aAAa,CAAC;GAC5D,CAAC;AACJ,CAAC;;ACvDD,MAAM,aAAa,GAAG,IAAI,CAAC;AAC3B,MAAM,QAAQ,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAE5B;;;;;MAKa,WAAW,GAAG,CAAC,OAAoB,KAA4D,iBAAiB,CAAC,OAAO,EAAE,QAAQ,EAAE,aAAa;;ACV9J;;;AAGYA;AAAZ,WAAY,SAAS;EACnB,kCAAqB,CAAA;EACrB,sCAAyB,CAAA;AAC3B,CAAC,EAHWA,iBAAS,KAATA,iBAAS,QAGpB;AAOD;;;MAGa,KAAK,GAAG,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO;;;;;;;;;","names":["Direction"],"sources":["src/utils/locale.utils.ts","src/locales/index.ts","src/components/molecules/menu/mg-menu/mg-menu.conf.ts"],"sourcesContent":["/**\n * Format number to the locale currency\n * @param number - number to format\n * @param locale - locale to apply\n * @param currency - currency to apply\n * @returns formatted currency\n */\nexport const localeCurrency = (number: number, locale: string, currency: string): string => {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);\n};\n\n/**\n * Format number to locale\n * @param number - number to format\n * @param locale - locale to apply\n * @returns formatted number\n */\nexport const localeNumber = (number: number, locale: string): string => {\n  return new Intl.NumberFormat(locale).format(number);\n};\n\n/**\n * Date RegExp\n */\nexport const dateRegExp = /^\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$/;\n\n/**\n * Locale date format\n * @param date - date to format\n * @param locale - locale to apply\n * @returns formatted date\n */\nexport const localeDate = (date: string, locale: string): string => {\n  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {\n    return '';\n  }\n  return new Intl.DateTimeFormat(locale).format(new Date(date));\n};\n\n/**\n * Get locale and messages\n * We load the defined locale but for now we only support the first subtag for messages\n * @param element - element we need to get the language\n * @param messages - messages to use\n * @param defaultLocale - default messages locale\n * @returns messages object\n */\nexport const getLocaleMessages = (element: HTMLElement, messages: unknown, defaultLocale: string): { locale: string; messages: Record<string, unknown> } => {\n  // Get local\n  const closestLangAttribute: HTMLElement = element.closest('[lang]');\n  const closestLang: string[] = Intl.NumberFormat.supportedLocalesOf(closestLangAttribute?.lang);\n  const locale = closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;\n  // Only keep first subtag\n  const localeSubtag = locale.split('-').shift();\n  // Return\n  return {\n    locale,\n    messages: messages[localeSubtag] || messages[defaultLocale],\n  };\n};\n","import en from './en/messages.json';\nimport fr from './fr/messages.json';\nimport { getLocaleMessages } from '../utils/locale.utils';\n\nconst defaultLocale = 'en';\nconst messages = { en, fr };\n\n/**\n * Get Intl object\n * @param element - element we need to get the language\n * @returns messages object\n */\nexport const initLocales = (element: HTMLElement): { locale: string; messages: Record<string, unknown> } => getLocaleMessages(element, messages, defaultLocale);\n","import { MgItemMore } from '../../mg-item-more/mg-item-more';\n\n/**\n * Menu direction type\n */\nexport enum Direction {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal',\n}\n\n/**\n * ItemMore prop type\n */\nexport type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel' | 'size'>;\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['regular', 'medium', 'large'] as const;\n\n/**\n * item Size from sizes\n */\nexport type MenuSizeType = (typeof sizes)[number];\n"],"version":3}

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

@@ -1,116 +0,0 @@
-/**
- * A11Y
- */
-.sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
-}
-
-*:focus:not(:focus-visible) {
-  outline: none;
-}
-
-@media (prefers-reduced-motion) {
-  .mg-a11y-animation {
-    animation: none !important;
-    transition: none !important;
-  }
-}
-/* Variables */
-/* Mixins */
-/* Styles */
-.mg-badge {
-  padding: 0 0.4rem;
-  height: var(--mg-badge-size);
-  min-width: var(--mg-badge-size);
-  box-sizing: border-box;
-  border: 0.1rem solid;
-  border-radius: calc(var(--mg-badge-size) / 2);
-  font-size: var(--mg-badge-font-size);
-  font-weight: 600;
-  text-align: center;
-  line-height: var(--mg-badge-size);
-}
-.mg-badge.mg-badge--primary {
-  background-color: hsl(var(--color-dark));
-  border-color: hsl(var(--color-dark));
-  color: hsl(var(--color-light));
-}
-.mg-badge.mg-badge--primary.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-dark));
-}
-.mg-badge.mg-badge--secondary {
-  background-color: hsl(var(--color-light));
-  border-color: hsl(var(--color-light));
-  color: hsl(var(--color-dark));
-}
-.mg-badge.mg-badge--secondary.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-light));
-}
-.mg-badge.mg-badge--success {
-  background-color: hsl(var(--color-success));
-  border-color: hsl(var(--color-success));
-  color: hsl(var(--color-dark));
-}
-.mg-badge.mg-badge--success.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-success));
-}
-.mg-badge.mg-badge--warning {
-  background-color: hsl(var(--color-warning));
-  border-color: hsl(var(--color-warning));
-  color: hsl(var(--color-dark));
-}
-.mg-badge.mg-badge--warning.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-warning));
-}
-.mg-badge.mg-badge--danger {
-  background-color: hsl(var(--color-danger));
-  border-color: hsl(var(--color-danger));
-  color: hsl(var(--color-light));
-}
-.mg-badge.mg-badge--danger.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-danger));
-}
-.mg-badge.mg-badge--info {
-  background-color: hsl(var(--color-info));
-  border-color: hsl(var(--color-info));
-  color: hsl(var(--color-light));
-}
-.mg-badge.mg-badge--info.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-info));
-}
-.mg-badge.mg-badge--text-color {
-  background-color: currentColor;
-  border-color: currentColor;
-}
-.mg-badge.mg-badge--text-color .mg-badge__value {
-  color: hsl(var(--mg-badge-text-color, var(--color-light)));
-}
-.mg-badge.mg-badge--text-color.mg-badge--outline {
-  background-color: transparent;
-}
-.mg-badge.mg-badge--text-color.mg-badge--outline .mg-badge__value {
-  color: currentColor;
-}
-
-.mg-badge,
-mg-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}

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

@@ -1,182 +0,0 @@
-/* Variables */
-/* Mixins */
-:host {
-  display: inline-block;
-  vertical-align: middle;
-  max-width: 100%;
-}
-
-:host(:focus-visible) {
-  outline: 0;
-}
-:host(:focus-visible) .mg-button {
-  outline-color: -webkit-focus-ring-color;
-  outline-style: auto;
-  outline-width: 0.2rem;
-}
-
-:host(:hover) .mg-button--flat:not(.mg-button--disabled) {
-  background: hsl(var(--color-dark), 0.1);
-}
-
-:host([full-width]) {
-  display: block;
-}
-
-:host([disabled]),
-:host([aria-disabled=true]) {
-  pointer-events: none;
-}
-
-.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%)));
-}
-
-:host(:hover) .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%)));
-}
-
-:host(:hover) .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%)));
-}
-
-:host(:hover) .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%)));
-}
-
-:host(:hover) .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%)));
-}
-
-:host(:hover) .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%)));
-}
-
-:host(:hover) .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--link {
-  padding: unset;
-  min-height: unset;
-  background: unset;
-  border: unset;
-  border-radius: unset;
-  text-decoration: underline;
-}
-.mg-button.mg-button--link slot {
-  font-weight: 600;
-}
-.mg-button.mg-button--link:hover {
-  text-decoration: none;
-}
-.mg-button.mg-button--full-width {
-  display: flex;
-  justify-content: center;
-}
-.mg-button.mg-button--loading > mg-icon:first-of-type {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-.mg-button.mg-button--loading .mg-button__content {
-  opacity: 0;
-}
-.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;
-}

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

@@ -1,75 +0,0 @@
-.mg-card {
-  position: relative;
-  width: 100%;
-  max-width: var(--mg-card-max-width);
-  min-width: var(--mg-card-min-width);
-  padding: var(--mg-card-padding, var(--mg-card-padding-default));
-  overflow: var(--mg-card-overflow, var(--mg-card-overflow-default));
-  box-sizing: border-box;
-  z-index: inherit;
-  background: var(--mg-card-background, var(--mg-card-background-default));
-  border: var(--mg-card-border, var(--mg-card-border-default));
-  border-radius: var(--mg-card-border-radius, var(--mg-card-border-radius-default));
-  box-shadow: var(--mg-card-box-shadow, var(--mg-card-box-shadow-default));
-}
-.mg-card ::slotted(*) {
-  --mg-card-border: var(--mg-card-border-default);
-  --mg-card-padding: var(--mg-card-padding-default);
-  --mg-card-border-radius: var(--mg-card-border-radius-default);
-  --mg-card-background: var(--mg-card-background-default);
-  --mg-card-box-shadow: var(--mg-card-box-shadow-default);
-  --mg-card-max-width: unset;
-  --mg-card-min-width: unset;
-}
-.mg-card.mg-card--info {
-  overflow: hidden;
-}
-.mg-card.mg-card--info.mg-card--bar-left .mg-card__bar {
-  background-color: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
-}
-.mg-card.mg-card--info.mg-card--fill {
-  background-color: hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));
-}
-.mg-card.mg-card--warning {
-  overflow: hidden;
-}
-.mg-card.mg-card--warning.mg-card--bar-left .mg-card__bar {
-  background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
-}
-.mg-card.mg-card--warning.mg-card--fill {
-  background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));
-}
-.mg-card.mg-card--success {
-  overflow: hidden;
-}
-.mg-card.mg-card--success.mg-card--bar-left .mg-card__bar {
-  background-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
-}
-.mg-card.mg-card--success.mg-card--fill {
-  background-color: hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));
-}
-.mg-card.mg-card--danger {
-  overflow: hidden;
-}
-.mg-card.mg-card--danger.mg-card--bar-left .mg-card__bar {
-  background-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
-}
-.mg-card.mg-card--danger.mg-card--fill {
-  background-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));
-}
-.mg-card.mg-card--app {
-  overflow: hidden;
-}
-.mg-card.mg-card--app.mg-card--bar-left .mg-card__bar {
-  background-color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l));
-}
-.mg-card.mg-card--app.mg-card--fill {
-  background-color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l));
-}
-.mg-card__bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0.3rem;
-  height: 100%;
-}

package/dist/collection/components/atoms/mg-character-left/mg-character-left.css

@@ -1,3 +0,0 @@
-mg-character-left {
-  display: block;
-}

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

@@ -1,9 +0,0 @@
-.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%;
-}