@mgdis/mg-components 5.5.0 → 5.7.0

package/dist/collection/components/molecules/mg-tabs/mg-tabs.js

@@ -16,25 +16,7 @@ export class MgTabs {
     // classes
     this.tabPanel = 'panel';
     this.buttonTabBaseClass = 'mg-tabs__navigation-button';
-    // variables
     this.startIndex = 1;
-    /**
-     * Method to set active tab
-     *
-     * @param {number} tabKey item tab key to set to ACTIVE status
-     * @returns {void}
-     */
-    this.setActiveTab = (tabKey) => {
-      // reset active tabs
-      this.tabs.forEach(tab => {
-        if (this.tabHasGivenStatus(tab, Status.ACTIVE))
-          tab.status = Status.VISIBLE;
-      });
-      // set active tab from given tab key
-      this.tabs[tabKey - this.startIndex].status = Status.ACTIVE;
-      // emit change active tab key event
-      this.activeTabChange.emit(tabKey);
-    };
     /**
      * Method to know if given tab has the given status
      *
@@ -42,7 +24,7 @@ export class MgTabs {
      * @param {Status} status status to valide
      * @returns {boolean} status comparaison
      */
-    this.tabHasGivenStatus = (tab, status) => tab.status === status;
+    this.tabHasStatus = (tab, status) => tab.status === status;
     /**
      * Method to get element id from index
      *
@@ -50,31 +32,43 @@ export class MgTabs {
      * @param {number} index to generate id
      * @returns {string} generated element id
      */
-    this.getElementId = (element, index) => `${element}-${this.getTabIndex(index)}`;
+    this.getElementId = (element, index) => `${element}-${this.getTabItemIndex(index)}`;
     /**
-     * Method to get tab index
+     * Method to get tab item index
      *
      * @param {number} index to get
      * @returns {number} index
      */
-    this.getTabIndex = (index) => index + this.startIndex;
+    this.getTabItemIndex = (index) => index + this.startIndex;
+    /**
+     * Method to get the active-tab value
+     *
+     * @returns {number} of the active-tab
+     */
+    this.getActiveTab = () => this.activeTab || this.getTabItemIndex(this.tabs.map((tab, index) => (Object.assign(Object.assign({}, tab), { index }))).find(tab => this.tabHasStatus(tab, Status.ACTIVE)).index);
     /**
      * Handle click events on tabs
      *
      * @param {MouseEvent} event mouse event
      */
     this.handleClick = (event) => {
-      const tabId = event.currentTarget.getAttribute('data-index');
-      this.activeTab = Number(tabId);
+      const tabId = event.currentTarget.dataset.index;
+      const tab = this.tabs[Number(tabId) - this.startIndex];
+      if (this.tabHasStatus(tab, Status.HIDDEN) || this.tabHasStatus(tab, Status.DISABLED)) {
+        event.preventDefault();
+      }
+      else {
+        this.activeTab = Number(tabId);
+        this.tabFocus = undefined;
+      }
     };
     /**
      * get navigation button class from given status
      *
      * @param {Status} status button tab status
-     * @param {boolean} isSelector set if we need a CSS selector with the dot '.' at the begin. default value = false.
      * @returns {string} button class/selector variant
      */
-    this.getNavigationButtonClass = (status, isSelector = false) => `${isSelector ? '.' : ''}${this.buttonTabBaseClass}--${status}`;
+    this.getNavigationButtonClass = (status) => `${this.buttonTabBaseClass}--${status}`;
     /**
      * Handle keyboard event on tabs
      *
@@ -82,37 +76,66 @@ export class MgTabs {
      * @returns {void}
      */
     this.handleKeydown = (event) => {
-      let tabId = Number(event.target.getAttribute('data-index'));
       const parent = event.target.parentElement;
-      // change selected id from key code
-      if (event.key === 'ArrowRight') {
-        tabId++;
-      }
-      else if (event.key === 'ArrowLeft') {
-        tabId--;
+      if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {
+        this.tabFocus = Number(event.target.dataset.index);
+        parent.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute('tabindex', '-1');
+        // Move right
+        if (event.key === 'ArrowRight') {
+          this.tabFocus++;
+          // If we're at the end, go to the start
+          if (this.tabFocus > this.tabs.length)
+            this.tabFocus = this.startIndex;
+          // Move left
+        }
+        else if (event.key === 'ArrowLeft') {
+          this.tabFocus--;
+          // If we're at the start, move to the end
+          if (this.tabFocus < this.startIndex)
+            this.tabFocus = this.tabs.length;
+        }
+        const parentButtonElement = parent.querySelector(`[data-index="${this.tabFocus}"]`);
+        // if focus item is ['hidden'] we recursively repeat action
+        if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {
+          parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));
+          // else run focus methods on tabFocus element
+        }
+        else {
+          parentButtonElement.setAttribute('tabindex', '0');
+          parentButtonElement.focus();
+        }
       }
-      // get selected tab if NOT hidden, disabled
-      const selectedTab = parent.querySelector(`[data-index="${tabId}"]:not(${[this.getNavigationButtonClass(Status.HIDDEN, true), this.getNavigationButtonClass(Status.DISABLED, true)].join()})`);
-      // apply selected tab if exist
-      if (selectedTab !== null) {
-        selectedTab.focus();
-        this.activeTab = tabId;
+      else if (event.key === 'Tab') {
+        this.resetFocus();
       }
     };
+    /**
+     * Method to reset focus behavior
+     *
+     * @returns {void}
+     */
+    this.resetFocus = () => {
+      // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
+      setTimeout(() => {
+        this.tabFocus = undefined;
+        Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
+          tab.setAttribute('tabindex', this.getActiveTab() - this.startIndex !== index ? '-1' : '0');
+        });
+      }, 0);
+    };
     /**
      * Validate slots setting
      */
     this.validateSlots = () => {
       const slots = Array.from(this.element.children).filter(slot => { var _a; return (_a = slot.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.includes('tab_content-'); });
-      if (slots.length !== this.tabs.length) {
+      if (slots.length !== this.tabs.length)
         throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
-      }
     };
     this.identifier = createID('mg-tabs');
     this.label = undefined;
     this.size = 'regular';
     this.items = undefined;
-    this.activeTab = 1;
+    this.activeTab = undefined;
     this.tabs = [];
     this.classList = new ClassList(['mg-tabs']);
   }
@@ -123,29 +146,44 @@ export class MgTabs {
   }
   validateSize(newValue) {
     if (!sizes.includes(newValue)) {
-      throw new Error(`<mg-tabs> prop "size" must be one of : ${sizes.join(', ')}`);
+      throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}`);
     }
     this.classList.add(`mg-tabs--size-${this.size}`);
   }
   validateItems(newValue) {
     // String array
     if (allItemsAreString(newValue)) {
-      this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
+      this.tabs = newValue.map((item, index) => ({ label: item, status: index === 0 ? Status.ACTIVE : Status.VISIBLE }));
     }
     // Object array
-    else if (newValue && newValue.every(item => isTabItem(item))) {
+    else if (newValue && newValue.length > 0 && newValue.every(item => isTabItem(item))) {
       this.tabs = newValue;
+      // init active tabs if not set. Default: index 0.
+      if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) === undefined)
+        this.tabs[0].status = Status.ACTIVE;
     }
     else {
       throw new Error('<mg-tabs> prop "items" is required and all items must be the same type: TabItem.');
     }
   }
   validateActiveTab(newValue) {
-    if (newValue < 1 || newValue > this.tabs.length) {
-      throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
+    if (typeof newValue === 'number' && newValue >= 1 && newValue <= this.tabs.length) {
+      this.tabs.forEach((tab, index) => {
+        const isNewActiveTab = index === newValue - this.startIndex;
+        // reset active tabs
+        if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab)
+          tab.status = Status.VISIBLE;
+        // set active tab from given tab key
+        else if ((tab.status === undefined || this.tabHasStatus(tab, Status.VISIBLE)) && isNewActiveTab)
+          tab.status = Status.ACTIVE;
+      });
+      // emit change active tab key event
+      if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) !== undefined) {
+        this.activeTabChange.emit(newValue);
+      }
     }
-    else {
-      this.setActiveTab(newValue);
+    else if (newValue !== undefined) {
+      throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
     }
   }
   /*************
@@ -164,19 +202,30 @@ export class MgTabs {
     this.validateSize(this.size);
     this.validateSlots();
   }
+  /**
+   * add listners
+   *
+   * @returns {void}
+   */
+  componentDidLoad() {
+    document.addEventListener('click', (event) => {
+      if (event.target.closest('mg-tabs') !== this.element)
+        this.resetFocus();
+    }, false);
+  }
   /**
    * Render
    *
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { class: this.classList.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { role: "tab", id: this.getElementId(this.identifier, index), class: {
+    return (h("div", { class: this.classList.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
         [`${this.buttonTabBaseClass}`]: true,
         [`${this.buttonTabBaseClass}--horizontal`]: true,
-        [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasGivenStatus(tab, Status.ACTIVE),
-        [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasGivenStatus(tab, Status.DISABLED),
-        [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasGivenStatus(tab, Status.HIDDEN),
-      }, tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasGivenStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabIndex(index), disabled: this.tabHasGivenStatus(tab, Status.DISABLED) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: tab.status !== Status.ACTIVE ? 'primary' : 'info', value: tab.badge.value, label: tab.badge.label }))))), this.tabs.map((tab, index) => (h("article", { role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasGivenStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
+        [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
+        [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),
+        [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),
+      }, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' }))))), this.tabs.map((tab, index) => (h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
   }
   static get is() { return "mg-tabs"; }
   static get encapsulation() { return "shadow"; }
@@ -282,11 +331,10 @@ export class MgTabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Active tab number\ndefault: first is 1"
+          "text": "Active tab number"
         },
         "attribute": "active-tab",
-        "reflect": true,
-        "defaultValue": "1"
+        "reflect": true
       }
     };
   }

package/dist/collection/locales/en/messages.json

@@ -21,7 +21,9 @@
   },
   "form": {
     "required": "Fields with a <strong class=\"is-asterisk\">*</strong> are required",
-    "allRequired": "All fields are required"
+    "requiredSingle": "Field with a <strong class=\"is-asterisk\">*</strong> is required",
+    "allRequired": "All fields are required",
+    "allRequiredSingle": "The field is required"
   },
   "message": {
     "closeButton": "Close message"
@@ -49,5 +51,12 @@
     "close": "Close",
     "next": "next",
     "previous": "previous"
+  },
+  "plusMenu": {
+    "moreLabel": "Additional menu",
+    "badgeLabel": "Include notification(s)"
+  },
+  "actionMore": {
+    "label": "Actions"
   }
 }

package/dist/collection/locales/fr/messages.json

@@ -21,7 +21,9 @@
   },
   "form": {
     "required": "Les champs marqués d'un <strong class=\"is-asterisk\">*</strong> sont obligatoires",
-    "allRequired": "Tous les champs sont obligatoires"
+    "requiredSingle": "Le champ marqué d'un <strong class=\"is-asterisk\">*</strong> est obligatoire",
+    "allRequired": "Tous les champs sont obligatoires",
+    "allRequiredSingle": "Le champ est obligatoire"
   },
   "message": {
     "closeButton": "Fermer le message"
@@ -49,5 +51,12 @@
     "close": "Fermer",
     "next": "suivant",
     "previous": "précédent"
+  },
+  "plusMenu": {
+    "moreLabel": "Menu complémentaire",
+    "badgeLabel": "Notification(s) incluse(s)"
+  },
+  "actionMore": {
+    "label": "Actions"
   }
 }

package/dist/collection/locales/index.js

@@ -1,35 +1,12 @@
 import en from './en/messages.json';
 import fr from './fr/messages.json';
+import { getLocaleMessages } from '../utils/locale.utils';
 const defaultLocale = 'en';
 const messages = { en, fr };
-/**
- * Get locale
- *
- * @param {HTMLElement} element element that needs to know the locale to use
- * @returns {string} locale
- */
-const getLocale = (element) => {
-  var _a;
-  // validate locale
-  const closestLang = Intl.NumberFormat.supportedLocalesOf((_a = element.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.lang);
-  return closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;
-};
 /**
  * Get Intl object
- * We load the defined locale but for now we only support the first subtag for messages
  *
  * @param {HTMLElement} element element we need to get the language
- * @returns {{ locale: string; messages: unknown }} messages object
+ * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const initLocales = (element) => {
-  // Get local
-  const locale = getLocale(element);
-  // Only keep first subtag
-  const localeSubtag = locale.split('-').shift();
-  // Return
-  return {
-    locale,
-    messages: messages[localeSubtag] || messages[defaultLocale],
-  };
-};
+export const initLocales = (element) => getLocaleMessages(element, messages, defaultLocale);

package/dist/collection/styles/a11y.scss

@@ -0,0 +1,32 @@
+/**
+ * A11Y
+ */
+
+// Make content available only for screen reader
+// https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
+.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;
+}
+
+// Remove outline for non-keyboard :focus
+// https://www.tpgi.com/focus-visible-and-backwards-compatibility/
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
+}

package/dist/collection/styles/components.scss

@@ -0,0 +1,3 @@
+[hide] {
+  display: none;
+}

package/dist/collection/styles/fonts.scss

@@ -0,0 +1,21 @@
+/**
+ * Open Sans
+ * https://fonts.google.com/specimen/Open+Sans
+ */
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('fonts/OpenSans-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 600;
+  src: url('fonts/OpenSans-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 700;
+  src: url('fonts/OpenSans-Bold.ttf') format('truetype');
+}

package/dist/collection/styles/form.scss

@@ -0,0 +1,3 @@
+.is-asterisk {
+  color: hsl(var(--color-danger));
+}

package/dist/collection/styles/global.scss

@@ -0,0 +1,87 @@
+/**
+ * Here we building the CSS for the component library
+ */
+
+// Normalize CSS : https://necolas.github.io/normalize.css/
+@import '~normalize.css/normalize.css';
+
+// Fonts
+@import './fonts.scss';
+
+// Variables
+@import './variables.css';
+
+// Main style
+@import './main.scss';
+
+// Typography style
+@import './typography.scss';
+
+// Accessibility
+@import './a11y.scss';
+
+// Form
+// already included by mg-form
+// @import './form.scss';
+
+// Layout
+@import './layout.scss';
+
+// Utilities
+@import './utilities.scss';
+
+/**
+ * Components style
+ * molecules
+ */
+
+@import './components.scss';
+
+/* Atoms */
+
+// <mg-badge>
+@import '../components/atoms/mg-badge/mg-badge.scss';
+
+// <mg-button>
+@import '../components/atoms/mg-button/mg-button.scss';
+
+// <mg-character-left>
+@import '../components/atoms/mg-character-left/mg-character-left.scss';
+
+// <mg-icon>
+@import '../components/atoms/mg-icon/mg-icon.scss';
+
+// <mg-input-title>
+//! For now input style will not be included
+// @import '../components/atoms/mg-input-title/mg-input-title.scss';
+
+// <mg-tag>
+@import '../components/atoms/mg-tag/mg-tag.scss';
+
+// <mg-tooltip>
+@import '../components/atoms/mg-tooltip/mg-tooltip.scss';
+
+/* Molecules */
+
+// <mg-input-...>
+//! For now input style will not be included
+// @import '../components/molecules/inputs/styles/mg-input.scss';
+// @import '../components/molecules/inputs/styles/mg-input-box.scss';
+// @import '../components/molecules/inputs/styles/mg-input-charleft.scss';
+// @import '../components/molecules/inputs/styles/mg-input-fieldset.scss';
+// @import '../components/molecules/inputs/styles/mg-input-width.scss';
+
+// <mg-form>
+@import '../components/molecules/mg-form/mg-form.scss';
+
+// <mg-message>
+@import '../components/molecules/mg-message/mg-message.scss';
+
+// <mg-pagination>
+@import '../components/molecules/mg-pagination/mg-pagination.scss';
+
+// <mg-popover>
+@import '../components/molecules/mg-popover/mg-popover.scss';
+
+// <mg-tabs>
+@import '../components/molecules/mg-tabs/mg-tabs.scss';

package/dist/collection/styles/layout.scss

@@ -0,0 +1,29 @@
+@use 'sass:math';
+
+// Number of column
+$grid-columns: 12;
+
+// Calculate width
+@function round-width($i) {
+  $width: math.div(100 * $i, $grid-columns);
+  @return #{$width}#{'%'};
+}
+
+.mg-grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+// Those columns will equaly share space
+.mg-grid__col {
+  flex: 1 0 0;
+  padding: 0 var(--mg-grid-spacing);
+
+  // Building columns
+  @for $i from 1 through $grid-columns {
+    &.mg-grid__col-#{$i} {
+      flex: 0 0 auto;
+      width: round-width($i);
+    }
+  }
+}

package/dist/collection/styles/main.scss

@@ -0,0 +1,23 @@
+// Make all element use the border box model
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/**
+ * We set html font size to 62.5% to get 10px in most of the case.
+ * This is a common use for an easiest calculation : 1rem = 10px
+ * Default font size will be defined in body element.
+ */
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-size: var(--font-size);
+  font-family: var(--font-family);
+  line-height: var(--line-height);
+  -webkit-font-smoothing: antialiased;
+}

package/dist/collection/styles/mg-icon-animation.scss

@@ -0,0 +1,6 @@
+@mixin rotate($selector, $duration) {
+  transition: $duration;
+  &--rotate#{$selector} {
+    transform: rotate(180deg);
+  }
+}

package/dist/collection/styles/navigation-button.scss

@@ -0,0 +1,77 @@
+@use 'sass:map';
+
+$border-bottom-size: 0.3rem;
+$font-size-large: calc(var(--font-size) + 0.2rem);
+$navigation-button-column-gap: 1rem;
+
+@mixin navigation-button($element, $button-sizes) {
+  @each $name, $size in $button-sizes {
+    .#{$element}.#{$element}--size-#{$name} .#{$element}__navigation-button,
+    .#{$element}__navigation-button.#{$element}__navigation-button--size-#{$name} {
+      padding: #{map.get($size, 'vertical')} #{map.get($size, 'horizontal')};
+      height: calc(#{map.get($size, 'height')});
+      &,
+      ::slotted([slot='label']),
+      ::slotted([slot='metadata']) {
+        @if $name == 'regular' {
+          font-size: var(--font-size);
+        } @else {
+          font-size: $font-size-large;
+        }
+      }
+      &.#{$element}__navigation-button--horizontal {
+        padding-bottom: calc(#{map.get($size, 'vertical')} - #{$border-bottom-size});
+      }
+      &.#{$element}__navigation-button--vertical {
+        padding-left: calc(#{map.get($size, 'horizontal')} - #{$border-bottom-size});
+      }
+    }
+  }
+
+  .#{$element}__navigation-button {
+    display: flex;
+    align-items: center;
+    column-gap: var(--#{$element}-navigation-button-column-gap, $navigation-button-column-gap);
+    background-color: unset;
+    border: none;
+    font-family: var(--font-family);
+    font-weight: 400;
+    color: hsl(var(--#{$element}-color-hsl, var(--color-dark)));
+    line-height: var(--line-height);
+    text-decoration: none;
+    white-space: nowrap;
+    box-sizing: border-box;
+    cursor: pointer;
+    &:disabled,
+    &--disabled {
+      cursor: default;
+      opacity: var(--mg-disabled-opacity);
+    }
+    &:focus-visible {
+      z-index: 10;
+    }
+    &:hover:not(.#{$element}__navigation-button--disabled),
+    &:focus-visible:not(.#{$element}__navigation-button--disabled) {
+      background-color: hsl(var(--#{$element}-focused-background-color-hsl), 0.1);
+    }
+    &.#{$element}__navigation-button--active {
+      color: hsl(var(--#{$element}-color-active-hsl));
+      font-weight: 600;
+      &.#{$element}__navigation-button--horizontal {
+        border-bottom-color: hsl(var(--#{$element}-border-color-active-hsl));
+      }
+      &.#{$element}__navigation-button--vertical {
+        border-left-color: hsl(var(--#{$element}-border-color-active-hsl));
+      }
+    }
+    &.#{$element}__navigation-button--hidden {
+      display: none;
+    }
+    &.#{$element}__navigation-button--horizontal {
+      border-bottom: $border-bottom-size solid transparent;
+    }
+    &.#{$element}__navigation-button--vertical {
+      border-left: $border-bottom-size solid transparent;
+    }
+  }
+}

package/dist/collection/styles/reset-mg-card-slotted-variables.scss

@@ -0,0 +1,9 @@
+@mixin reset-slot-card-variables() {
+  ::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);
+  }
+}