@mgdis/mg-components 5.18.0 → 5.19.1

package/dist/collection/components/molecules/mg-details/mg-details.css

@@ -1,64 +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;
-  }
-}
-.mg-details summary {
-  display: flex;
-  align-items: baseline;
-  cursor: pointer;
-}
-.mg-details__toggle {
-  margin-left: 1.5rem;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  align-self: flex-start;
-  gap: 0.6rem;
-  min-height: calc(var(--font-size) * var(--line-height));
-}
-.mg-details__toggle-icon.mg-details__toggle-icon--reverse {
-  transform: rotate(180deg);
-}
-.mg-details__details {
-  margin-top: var(--mg-details-spacing);
-}
-
-/* hide toggle button when < 700px */
-@media (width < 43.75rem) {
-  .mg-details__toggle > span {
-    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;
-  }
-}

package/dist/collection/components/molecules/mg-form/mg-form.css

@@ -1,19 +0,0 @@
-.is-asterisk {
-  color: hsl(var(--color-danger));
-}
-
-.mg-form,
-.mg-form-group {
-  --mg-inputs-title-width: var(--mg-form-inputs-title-width, 15rem);
-  --mg-inputs-margin-bottom: 1.5rem;
-  --mg-inputs-title-horizontal-space: 3rem;
-  --mg-inputs-shrink: 0;
-}
-.mg-form.mg-form--all-required,
-.mg-form-group.mg-form--all-required {
-  --mg-input-title-display: none;
-}
-.mg-form > p,
-.mg-form-group > p {
-  font-size: 1.2rem;
-}

package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.css

@@ -1,45 +0,0 @@
-.mg-illustrated-message {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 3em 7rem;
-  margin: auto;
-  padding: var(--mg-illustrated-message-padding-vertical) 1.5rem;
-  max-width: 47.5rem;
-  box-sizing: border-box;
-  text-align: center;
-}
-.mg-illustrated-message.mg-illustrated-message--horizontal {
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  max-width: unset;
-}
-.mg-illustrated-message.mg-illustrated-message--horizontal .mg-illustrated-message__slots,
-.mg-illustrated-message.mg-illustrated-message--horizontal .mg-illustrated-message__illustration {
-  max-width: 47.5rem;
-}
-.mg-illustrated-message__illustration {
-  max-height: 18.4rem;
-}
-.mg-illustrated-message__illustration ::slotted([slot=illustration]) {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 18.4rem;
-}
-.mg-illustrated-message__illustration.mg-illustrated-message__illustration--small {
-  max-height: 6rem;
-}
-.mg-illustrated-message__illustration.mg-illustrated-message__illustration--small ::slotted([slot=illustration]) {
-  max-height: 6rem;
-}
-.mg-illustrated-message__title ::slotted([slot=title]) {
-  margin: 0;
-  font-size: 2rem !important;
-  font-family: var(--font-family) !important;
-  font-weight: 400;
-}
-.mg-illustrated-message__details ::slotted([slot=details]) {
-  margin: 2rem 0 0;
-}

package/dist/collection/components/molecules/mg-item-more/mg-item-more.css

@@ -1,30 +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;
-  }
-}
-:host {
-  display: flex;
-}

package/dist/collection/components/molecules/mg-message/mg-message.css

@@ -1,82 +0,0 @@
-:host {
-  --mg-card-padding: 0;
-  --mg-card-border-radius: var(--mg-message-border-radius);
-  --mg-card-border: none;
-  --mg-card-overflow: hidden;
-}
-
-:host([hide]) {
-  display: none;
-}
-
-.mg-message {
-  display: inline-block;
-  min-height: var(--default-size);
-}
-.mg-message.mg-message--info .mg-message__icon {
-  color: hsl(var(--color-info));
-}
-.mg-message.mg-message--warning .mg-message__icon {
-  color: hsl(var(--color-warning));
-}
-.mg-message.mg-message--success .mg-message__icon {
-  color: hsl(var(--color-success));
-}
-.mg-message.mg-message--danger .mg-message__icon {
-  color: hsl(var(--color-danger));
-}
-.mg-message.mg-message--close-button {
-  --mg-card-padding: 0 3.4rem 0 0;
-}
-.mg-message.mg-message--hide {
-  display: none;
-}
-.mg-message ::slotted(*) {
-  margin: 0;
-  padding: 0;
-}
-.mg-message__icon {
-  position: absolute;
-  top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
-  left: 1.3rem;
-  line-height: 1;
-}
-.mg-message__content {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  align-content: stretch;
-  padding: 0 1rem 0 3.8rem;
-}
-.mg-message__content-slot {
-  flex-grow: 1;
-  margin: 0.84rem 0;
-}
-.mg-message__content-separator {
-  display: inline-block;
-  width: 4.5rem;
-  height: 0;
-}
-.mg-message__content-actions-slot {
-  padding: 1rem 0;
-  text-align: right;
-}
-.mg-message__close-button {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-.mg-message ::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-message,
-mg-message {
-  max-width: 100%;
-}

package/dist/collection/components/molecules/mg-modal/mg-modal.css

@@ -1,67 +0,0 @@
-:host {
-  --mg-card-border-radius: var(--mg-modal-border-radius);
-  --mg-card-padding: 1.5rem 2.5rem;
-  --mg-card-border: none;
-}
-
-.mg-modal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 2000;
-  padding: 2rem 0;
-  background-color: hsl(var(--color-light), 0.85);
-}
-.mg-modal mg-card {
-  display: flex;
-  width: 60rem;
-  max-width: 100%;
-  max-height: 100%;
-}
-.mg-modal__dialog {
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  align-self: center;
-  row-gap: 3rem;
-  height: fit-content;
-  max-height: 100%;
-}
-.mg-modal__header {
-  margin-bottom: 0.5rem;
-}
-.mg-modal__title {
-  margin: 0;
-  font-family: var(--font-family-heading);
-  font-size: var(--mg-modal-title-font-size);
-  font-weight: 600;
-}
-.mg-modal__close-button {
-  float: right;
-  height: var(--mg-modal-title-font-size);
-  margin-top: calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);
-  margin-right: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1);
-}
-.mg-modal__content {
-  overflow-y: auto;
-}
-.mg-modal__content::slotted(*) {
-  font-size: var(--mg-modal-content-font-size);
-}
-.mg-modal.mg-modal--hide {
-  display: none;
-}
-.mg-modal ::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;
-}

package/dist/collection/components/molecules/mg-pagination/mg-pagination.css

@@ -1,47 +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;
-  }
-}
-.mg-pagination {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-}
-.mg-pagination mg-input-select {
-  margin-right: 0.5rem;
-}
-.mg-pagination mg-button {
-  display: flex;
-}
-.mg-pagination mg-button:first-of-type {
-  margin-right: 1rem;
-}
-.mg-pagination mg-button:last-of-type {
-  margin-left: 1rem;
-}
-.mg-pagination.mg-pagination--hide-page-count mg-button {
-  margin: 0;
-}

package/dist/collection/components/molecules/mg-panel/mg-panel.css

@@ -1,64 +0,0 @@
-:host {
-  --mg-card-border: none;
-  --mg-card-padding: 0;
-  --mg-card-border-radius: var(--mg-panel-border-radius);
-  --mg-card-background: hsl(var(--mg-panel-background));
-  --mg-card-box-shadow: var(--mg-panel-box-shadow);
-}
-
-.mg-panel__header {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  padding: 0 1rem 0 0.3rem;
-  align-items: flex-start;
-}
-.mg-panel__header.mg-panel__header--reverse {
-  padding-right: 0.3rem;
-  padding-left: 1rem;
-}
-.mg-panel__header-title, .mg-panel__header-content {
-  display: flex;
-  margin: 0.3rem 0;
-}
-.mg-panel__header-content {
-  padding-left: 0.3rem;
-  flex: 1 auto;
-  min-height: var(--default-size);
-  align-items: center;
-}
-.mg-panel__header-title mg-input-text {
-  flex-grow: 1;
-  margin-left: 0.3rem;
-}
-.mg-panel__header-title mg-button + mg-button:not([slot=append-input]) {
-  margin-left: 0.3rem;
-}
-.mg-panel__header-title.mg-panel__header-title--full {
-  flex: 1 1 auto;
-}
-.mg-panel__collapse-button-content {
-  --font-size: 1.4rem;
-  --mg-button-font-weight: 600;
-}
-.mg-panel__collapse-button-icon.mg-panel__collapse-button-icon--reverse {
-  transform: rotate(180deg);
-}
-.mg-panel__content {
-  padding: var(--mg-panel-content-padding);
-}
-.mg-panel ::slotted([slot=header-right]) {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin-left: auto;
-}
-.mg-panel ::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;
-}

package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.css

@@ -1,135 +0,0 @@
-:host {
-  display: none;
-  padding: 1rem;
-  z-index: 2000;
-  color: hsl(var(--mg-popover-font-color));
-  position: relative;
-}
-
-:host([data-show]) {
-  display: block;
-}
-
-:host([data-popper-placement^=left-start]),
-:host([data-popper-placement^=left-end]),
-:host([data-popper-placement^=right-start]),
-:host([data-popper-placement^=right-end]) {
-  padding: 0 1rem;
-}
-
-.mg-popover-content {
-  --mg-card-max-width: var(--mg-popover-max-width);
-  --mg-card-min-width: var(--mg-popover-min-width);
-}
-.mg-popover-content mg-button {
-  float: right;
-  margin-right: calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);
-  margin-top: calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);
-  margin-left: 3rem;
-}
-.mg-popover-content__title ::slotted([slot=title]) {
-  margin: 0 0 1rem !important;
-  font-size: var(--mg-popover-title-font-size) !important;
-  font-weight: 600;
-}
-.mg-popover-content ::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;
-}
-
-/**
-* Arrow hide
-*/
-:host([data-popper-placement^=top][data-arrow-hide]) {
-  padding-bottom: 0;
-}
-
-:host([data-popper-placement^=bottom][data-arrow-hide]) {
-  padding-top: 0;
-}
-
-:host([data-popper-placement$=end][data-arrow-hide]),
-:host([data-popper-placement^=left][data-arrow-hide]) {
-  padding-right: 0;
-}
-
-:host([data-popper-placement$=start][data-arrow-hide]),
-:host([data-popper-placement^=right][data-arrow-hide]) {
-  padding-left: 0;
-}
-
-/**
-* Arrow style
-*/
-::slotted([slot=arrow]) {
-  position: absolute;
-  visibility: hidden;
-  width: calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);
-  height: calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);
-  /**
-  * Arrow position
-  */
-}
-::slotted([slot=arrow]):before {
-  visibility: visible;
-  content: "";
-  position: absolute;
-}
-:host([data-arrow-hide]) ::slotted([slot=arrow]) {
-  display: none;
-}
-:host([data-popper-placement^=top]) ::slotted([slot=arrow]), :host([data-popper-placement^=bottom]) ::slotted([slot=arrow]) {
-  height: 1rem;
-}
-:host([data-popper-placement^=top]) ::slotted([slot=arrow]):before, :host([data-popper-placement^=bottom]) ::slotted([slot=arrow]):before {
-  left: calc(var(--mg-card-border-radius) + 1rem);
-  border-right: calc(3rem / 2) solid transparent;
-  border-left: calc(3rem / 2) solid transparent;
-}
-:host([data-popper-placement^=top]) ::slotted([slot=arrow]) {
-  bottom: 0.1rem;
-  filter: drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15));
-}
-:host([data-popper-placement^=top]) ::slotted([slot=arrow]):before {
-  border-top: 1rem solid hsl(var(--mg-popover-background-color));
-}
-:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]) {
-  top: 0.1rem;
-  filter: drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15));
-}
-:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]):before {
-  border-bottom: 1rem solid hsl(var(--mg-popover-background-color));
-}
-:host([data-popper-placement^=left]) ::slotted([slot=arrow]), :host([data-popper-placement^=right]) ::slotted([slot=arrow]) {
-  width: 1rem;
-}
-:host([data-popper-placement^=left]) ::slotted([slot=arrow]):before, :host([data-popper-placement^=right]) ::slotted([slot=arrow]):before {
-  top: calc(var(--mg-card-border-radius) + 1rem);
-  border-top: calc(3rem / 2) solid transparent;
-  border-bottom: calc(3rem / 2) solid transparent;
-}
-:host([data-popper-placement^=left]) ::slotted([slot=arrow]) {
-  right: 0.1rem;
-  filter: drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));
-}
-:host([data-popper-placement^=left]) ::slotted([slot=arrow]):before {
-  border-left: 1rem solid hsl(var(--mg-popover-background-color));
-}
-:host([data-popper-placement^=right]) ::slotted([slot=arrow]) {
-  left: 0.1rem;
-  filter: drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15));
-}
-:host([data-popper-placement^=right]) ::slotted([slot=arrow]):before {
-  border-right: 1rem solid hsl(var(--mg-popover-background-color));
-}
-:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]), :host([data-popper-placement^=left-end]) ::slotted([slot=arrow]), :host([data-popper-placement^=right-start]) ::slotted([slot=arrow]), :host([data-popper-placement^=right-end]) ::slotted([slot=arrow]) {
-  height: calc(3rem + 2 * var(--mg-card-border-radius));
-}
-:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]):before, :host([data-popper-placement^=left-end]) ::slotted([slot=arrow]):before, :host([data-popper-placement^=right-start]) ::slotted([slot=arrow]):before, :host([data-popper-placement^=right-end]) ::slotted([slot=arrow]):before {
-  top: var(--mg-card-border-radius);
-}

package/dist/collection/components/molecules/mg-popover/mg-popover.css

@@ -1,11 +0,0 @@
-:host {
-  --mg-card-padding: var(--mg-popover-padding-vertical, 1.5rem) var(--mg-popover-padding-horizontal, var(--mg-popover-padding-vertical, 1.5rem));
-  --mg-card-border: none;
-  --mg-card-border-radius: 0.5rem;
-  --mg-card-background: hsl(var(--mg-popover-background-color));
-  position: relative;
-  display: contents;
-}
-:host::slotted(*) {
-  display: inline-block;
-}

package/dist/collection/components/molecules/mg-popover/test/mg-popover.e2e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mg-popover.e2e.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-popover/test/mg-popover.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\nimport { renderAttributes } from '../../../../utils/e2e.test.utils';\n\ndescribe('mg-popover', () => {\n  describe.each([\n    'auto',\n    'auto-start',\n    'auto-end',\n    'top',\n    'top-start',\n    'top-end',\n    'bottom',\n    'bottom-start',\n    'bottom-end',\n    'right',\n    'right-start',\n    'right-end',\n    'left',\n    'left-start',\n    'left-end',\n  ])('placement %s', placement => {\n    test.each([true, false])('Should render, case hide arrow %s', async arrowHide => {\n      const page = await createPage(\n        `<style>mg-button{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}</style>\n        <mg-popover ${renderAttributes({ placement, arrowHide })}>\n        <mg-button>Button</mg-button>\n        <h2 slot=\"title\">Blu bli blo bla</h2>\n        <p slot=\"content\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n        </p>\n        </mg-popover>`,\n      );\n\n      const mgPopover = await page.find('mg-popover');\n      const mgButton = await page.find('mg-button');\n      const popover = await page.find('mg-popover mg-popover-content');\n\n      expect(mgPopover).toHaveClass('hydrated');\n\n      // display popover on click on slotted element\n      mgButton.triggerEvent('click');\n      await page.waitForChanges();\n      await page.waitForNetworkIdle();\n\n      expect(popover).toHaveAttribute('data-show');\n\n      await page.setViewport({ width: 1200, height: 1200 });\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n\n      // hide popover on click on slotted element\n      mgButton.triggerEvent('click');\n      await page.waitForChanges();\n      await page.waitForNetworkIdle();\n\n      expect(popover).not.toHaveAttribute('data-show');\n\n      // display popover on keyboad click event on slotted element\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Enter');\n      await page.waitForChanges();\n      await page.waitForNetworkIdle();\n\n      expect(popover).toHaveAttribute('data-show');\n\n      // hide popover on keyboad escape key\n      await page.keyboard.down('Escape');\n      await page.waitForChanges();\n      await page.waitForNetworkIdle();\n\n      expect(popover).not.toHaveAttribute('data-show');\n    });\n  });\n\n  describe.each([\n    '',\n    '<h2 slot=\"title\">Titre un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long</h2>',\n  ])('with or without title', title => {\n    test('Should render with close button', async () => {\n      const page = await createPage(\n        `<mg-popover display close-button>\n        <mg-button>Button</mg-button>\n        ${title}\n        <p slot=\"content\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n        </p>\n        </mg-popover>`,\n      );\n\n      const mgPopover = await page.find('mg-popover');\n\n      expect(mgPopover).toHaveClass('hydrated');\n\n      await page.setViewport({ width: 500, height: 350 });\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n\n  describe.each(['title', 'content'])('re-position %s slot', slot => {\n    test('should re-position when slot size change', async () => {\n      const tagName = slot === 'title' ? 'h2' : 'p';\n      const page = await createPage(\n        `<style>mg-button{position:fixed;left:50%;transform:translateX(-50%)}</style>\n        <mg-popover ${renderAttributes({ placement: 'bottom-start', display: true })}>\n        <mg-button>Button</mg-button>\n        <${tagName} slot=\"${slot}\">\n          Lorem ipsum\n        </${tagName}>\n        </mg-popover>`,\n        { width: 400, height: 130 },\n      );\n\n      let screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n\n      await page.$eval(`mg-popover-content [slot=\"${slot}\"]`, el => {\n        el.textContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';\n      });\n\n      await page.waitForChanges();\n\n      screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n\n  test(`should position popover where it have enough place`, async () => {\n    const page = await createPage(\n      `<style>mg-button{position:fixed;left:0;bottom:0}</style>\n      <mg-popover ${renderAttributes({ display: true })}>\n      <mg-button>Button</mg-button>\n      <p slot=\"content\">\n        Lorem ipsum\n      </p>\n      </mg-popover>`,\n      { width: 400, height: 100 },\n    );\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  describe('style', () => {\n    test('Should render with child mg-card', async () => {\n      const page = await createPage(\n        `<mg-popover display close-button class=\"custom-popover-card\">\n        <mg-button>Button</mg-button>\n        <mg-card slot=\"content\">\n          My custom card\n        </mg-card>\n        </mg-popover>\n        <style>\n          .custom-popover-card {\n            --mg-popover-background-color: var(--color-danger);\n          }\n        </style>\n        `,\n      );\n\n      const mgPopover = await page.find('mg-popover');\n\n      expect(mgPopover).toHaveClass('hydrated');\n\n      await page.setViewport({ width: 500, height: 300 });\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n\n    test.each(['content', 'title'])('Should render with --mg-popover-max-width', async slot => {\n      const page = await createPage(\n        `<mg-popover display close-button class=\"custom-popover\">\n        <mg-button>Button</mg-button>\n        <h2 slot=\"${slot}\">Titre un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long un peu plus long</h2>\n        </mg-popover>\n        <style>\n          .custom-popover {\n            --mg-popover-max-width: 10rem;\n          }\n        </style>\n        `,\n      );\n\n      const mgPopover = await page.find('mg-popover');\n\n      expect(mgPopover).toHaveClass('hydrated');\n\n      await page.setViewport({ width: 500, height: 300 });\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.css

@@ -1,28 +0,0 @@
-.mg-skip-links {
-  position: absolute;
-  transform: translateY(-100%);
-  opacity: 0;
-  background: hsl(var(--color-light));
-}
-.mg-skip-links:focus-within {
-  position: relative;
-  transform: translateY(0);
-  opacity: 1;
-}
-.mg-skip-links__list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.6rem;
-  margin: 0;
-  padding: 0.64rem 1.8rem;
-  list-style: none;
-}
-.mg-skip-links__link {
-  display: inline-block;
-  padding: 1.2rem;
-  color: hsl(var(--color-dark));
-}
-.mg-skip-links__link:hover {
-  background: hsl(var(--color-dark), 0.1);
-}