@momentum-design/components 0.84.3 → 0.84.5

package/dist/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/order */
 // Components Imports
 import AlertChip from './components/alertchip';
 import Animation from './components/animation';

package/dist/models/component/index.d.ts

@@ -1,3 +1,3 @@
 import Component from './component.component';
-export type { RegisterOptions as ComponentRegisterOptions, } from './component.types';
+export type { RegisterOptions as ComponentRegisterOptions } from './component.types';
 export default Component;

package/dist/models/index.d.ts

@@ -1,4 +1,4 @@
 import Component from './component';
 import Provider from './provider';
-export type { ComponentRegisterOptions, } from './component';
-export { Component, Provider, };
+export type { ComponentRegisterOptions } from './component';
+export { Component, Provider };

package/dist/models/index.js

@@ -1,3 +1,3 @@
 import Component from './component';
 import Provider from './provider';
-export { Component, Provider, };
+export { Component, Provider };

package/dist/react/index.d.ts

@@ -3,8 +3,8 @@ export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
-export { default as Brandvisual } from './brandvisual';
 export { default as Badge } from './badge';
+export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
@@ -32,9 +32,9 @@ export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
-export { default as MenuItemRadio } from './menuitemradio';
-export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItem } from './menuitem';
+export { default as MenuItemCheckbox } from './menuitemcheckbox';
+export { default as MenuItemRadio } from './menuitemradio';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
 export { default as NavItem } from './navitem';

package/dist/react/index.js

@@ -3,8 +3,8 @@ export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
-export { default as Brandvisual } from './brandvisual';
 export { default as Badge } from './badge';
+export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
@@ -32,9 +32,9 @@ export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
-export { default as MenuItemRadio } from './menuitemradio';
-export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItem } from './menuitem';
+export { default as MenuItemCheckbox } from './menuitemcheckbox';
+export { default as MenuItemRadio } from './menuitemradio';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
 export { default as NavItem } from './navitem';

package/dist/utils/mixins/ButtonComponentMixin.js

@@ -9,18 +9,18 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 /* eslint-disable max-classes-per-file */
 import { property, state } from 'lit/decorators.js';
-import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from '../../components/button/button.constants';
+import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from '../../components/button/button.constants';
 export const ButtonComponentMixin = (superClass) => {
     class InnerMixinClass extends superClass {
         constructor() {
             super(...arguments);
             /**
-              * There are 3 variants of button: primary, secondary, tertiary. They are styled differently.
-              * - **Primary**: Solid background color.
-              * - **Secondary**: Transparent background with a solid border.
-              * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.
-              * @default primary
-              */
+             * There are 3 variants of button: primary, secondary, tertiary. They are styled differently.
+             * - **Primary**: Solid background color.
+             * - **Secondary**: Transparent background with a solid border.
+             * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.
+             * @default primary
+             */
             this.variant = DEFAULTS.VARIANT;
             /**
              * There are 5 colors for button: positive, negative, accent, promotional, default.
@@ -64,8 +64,8 @@ export const ButtonComponentMixin = (superClass) => {
         setSize(size) {
             const isIconType = this.typeInternal === BUTTON_TYPE_INTERNAL.ICON;
             const isValidSize = isIconType
-                ? Object.values(ICON_BUTTON_SIZES).includes(size)
-                    && !(size === ICON_BUTTON_SIZES[20] && this.variant !== BUTTON_VARIANTS.TERTIARY)
+                ? Object.values(ICON_BUTTON_SIZES).includes(size) &&
+                    !(size === ICON_BUTTON_SIZES[20] && this.variant !== BUTTON_VARIANTS.TERTIARY)
                 : Object.values(PILL_BUTTON_SIZES).includes(size);
             this.setAttribute('size', isValidSize ? `${size}` : `${DEFAULTS.SIZE}`);
         }
@@ -75,7 +75,7 @@ export const ButtonComponentMixin = (superClass) => {
          */
         inferButtonType() {
             var _a, _b;
-            const slot = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedNodes().filter((node) => { var _a; return node.nodeType !== Node.TEXT_NODE || ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()); }).length;
+            const slot = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedNodes().filter(node => { var _a; return node.nodeType !== Node.TEXT_NODE || ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()); }).length;
             if (slot && (this.prefixIcon || this.postfixIcon)) {
                 this.typeInternal = BUTTON_TYPE_INTERNAL.PILL_WITH_ICON;
                 this.setAttribute('data-btn-type', 'pill-with-icon');

package/dist/utils/mixins/CardAndDialogFooterMixin.js

@@ -22,7 +22,7 @@ export const CardAndDialogFooterMixin = (superClass) => {
          */
         updateFooterButtonColors(variant) {
             const footerButtons = [...(this.footerButtonPrimary || []), ...(this.footerButtonSecondary || [])];
-            footerButtons === null || footerButtons === void 0 ? void 0 : footerButtons.forEach((button) => {
+            footerButtons === null || footerButtons === void 0 ? void 0 : footerButtons.forEach(button => {
                 if (variant === VARIANTS.PROMOTIONAL) {
                     button.setAttribute('color', BUTTON_COLORS.PROMOTIONAL);
                 }
@@ -45,21 +45,21 @@ export const CardAndDialogFooterMixin = (superClass) => {
             if (tagname === DEFAULTS.LINK && ((_a = this.footerLink) === null || _a === void 0 ? void 0 : _a.length)) {
                 arrayItems = this.footerLink;
             }
-            else if (tagname === DEFAULTS.BUTTON
-                && variant === BUTTON_VARIANTS.PRIMARY
-                && ((_b = this.footerButtonPrimary) === null || _b === void 0 ? void 0 : _b.length)) {
+            else if (tagname === DEFAULTS.BUTTON &&
+                variant === BUTTON_VARIANTS.PRIMARY &&
+                ((_b = this.footerButtonPrimary) === null || _b === void 0 ? void 0 : _b.length)) {
                 arrayItems = this.footerButtonPrimary;
             }
-            else if (tagname === DEFAULTS.BUTTON
-                && variant === BUTTON_VARIANTS.SECONDARY
-                && ((_c = this.footerButtonSecondary) === null || _c === void 0 ? void 0 : _c.length)) {
+            else if (tagname === DEFAULTS.BUTTON &&
+                variant === BUTTON_VARIANTS.SECONDARY &&
+                ((_c = this.footerButtonSecondary) === null || _c === void 0 ? void 0 : _c.length)) {
                 arrayItems = this.footerButtonSecondary;
             }
             // if there are more than one instance, remove them.
             for (let i = 1; i < arrayItems.length; i += 1) {
                 arrayItems[i].remove();
             }
-            arrayItems.forEach((element) => {
+            arrayItems.forEach(element => {
                 // remove the element if it doesn't match with the tagname
                 if (!element.matches(tagname)) {
                     element.remove();
@@ -76,20 +76,19 @@ export const CardAndDialogFooterMixin = (superClass) => {
          * @returns The footer element
          */
         renderFooter() {
-            return html `
-        <slot name="footer">
-          <div part="footer">
-            <slot name="footer-link" @slotchange=${() => this.handleFooterSlot(DEFAULTS.LINK)}></slot>
-            <slot
-              name="footer-button-secondary"
-              @slotchange=${() => this.handleFooterSlot(DEFAULTS.BUTTON, BUTTON_VARIANTS.SECONDARY)}
-            ></slot>
-            <slot
-              name="footer-button-primary"
-              @slotchange=${() => this.handleFooterSlot(DEFAULTS.BUTTON, BUTTON_VARIANTS.PRIMARY)}
-            ></slot>
-          </div>
-        </slot>`;
+            return html ` <slot name="footer">
+        <div part="footer">
+          <slot name="footer-link" @slotchange=${() => this.handleFooterSlot(DEFAULTS.LINK)}></slot>
+          <slot
+            name="footer-button-secondary"
+            @slotchange=${() => this.handleFooterSlot(DEFAULTS.BUTTON, BUTTON_VARIANTS.SECONDARY)}
+          ></slot>
+          <slot
+            name="footer-button-primary"
+            @slotchange=${() => this.handleFooterSlot(DEFAULTS.BUTTON, BUTTON_VARIANTS.PRIMARY)}
+          ></slot>
+        </div>
+      </slot>`;
         }
     }
     __decorate([

package/dist/utils/mixins/FocusTrapMixin.js

@@ -41,7 +41,7 @@ class FocusTrapStack {
      */
     static activate(trap) {
         // Deactivate all other traps
-        this.stackArray.forEach((activeTrap) => {
+        this.stackArray.forEach(activeTrap => {
             if (activeTrap !== trap) {
                 activeTrap.setIsFocusTrapActivated(false);
             }
@@ -59,6 +59,9 @@ class FocusTrapStack {
      * @param trap - The focus trap to deactivate.
      */
     static deactivate(trap) {
+        if (!this.stack.has(trap)) {
+            return;
+        }
         this.stack.delete(trap);
         this.removeKeydownListener();
         // activate the previous trap in the stack if any
@@ -166,11 +169,11 @@ export const FocusTrapMixin = (superClass) => {
          * @returns True if the element is hidden.
          */
         isHidden(element) {
-            return (element.hasAttribute('hidden')
-                || element.getAttribute('aria-hidden') === 'true'
-                || this.hasHiddenStyle(element)
-                || this.isNotVisible(element)
-                || this.hasComputedHidden(element));
+            return (element.hasAttribute('hidden') ||
+                element.getAttribute('aria-hidden') === 'true' ||
+                this.hasHiddenStyle(element) ||
+                this.isNotVisible(element) ||
+                this.hasComputedHidden(element));
         }
         /**
          * Checks if the element is disabled.
@@ -207,12 +210,12 @@ export const FocusTrapMixin = (superClass) => {
             if (element instanceof HTMLInputElement && element.type !== 'hidden') {
                 return true;
             }
-            if ((element instanceof HTMLAudioElement || element instanceof HTMLVideoElement)
-                && element.hasAttribute('controls')) {
+            if ((element instanceof HTMLAudioElement || element instanceof HTMLVideoElement) &&
+                element.hasAttribute('controls')) {
                 return true;
             }
-            if ((element instanceof HTMLImageElement || element instanceof HTMLObjectElement)
-                && element.hasAttribute('usemap')) {
+            if ((element instanceof HTMLImageElement || element instanceof HTMLObjectElement) &&
+                element.hasAttribute('usemap')) {
                 return true;
             }
             if (element.hasAttribute('tabindex') && element.tabIndex > -1) {
@@ -256,7 +259,7 @@ export const FocusTrapMixin = (superClass) => {
                 }
                 else if (element.tagName === 'SLOT') {
                     const assignedNodes = element.assignedElements({ flatten: true });
-                    assignedNodes.forEach((node) => {
+                    assignedNodes.forEach(node => {
                         if (node instanceof HTMLElement) {
                             this.findFocusable(node, matches);
                         }
@@ -338,7 +341,7 @@ export const FocusTrapMixin = (superClass) => {
          * @returns The index of the active element.
          */
         findElement(activeElement) {
-            return this.focusableElements.findIndex((element) => this.isEqualFocusNode(activeElement, element));
+            return this.focusableElements.findIndex(element => this.isEqualFocusNode(activeElement, element));
         }
         /**
          * Checks if the active element is equal to the given element.

package/dist/utils/mixins/IconNameMixin.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
-import type { Constructor } from './index.types';
 import type { IconNames } from '../../components/icon/icon.types';
+import type { Constructor } from './index.types';
 export interface IconNameMixinInterface {
     iconName: IconNames;
 }

package/dist/utils/mixins/MenuMixin.js

@@ -31,16 +31,16 @@ export const MenuMixin = (superClass) => {
             var _a;
             const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
             const allAssignedElements = ((slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true })) || []);
-            return allAssignedElements.map((node) => {
+            return allAssignedElements
+                .map(node => {
                 if (node.tagName.toLowerCase() === MENUSECTION_TAGNAME) {
-                    return Array.from(node.children)
-                        .filter((child) => this.isValidMenuItem(child));
+                    return Array.from(node.children).filter(child => this.isValidMenuItem(child));
                 }
                 return this.isValidMenuItem(node) ? node : [];
             })
                 .flat()
-                .filter((node) => !!node)
-                .filter((node) => !node.hasAttribute('disabled'));
+                .filter(node => !!node)
+                .filter(node => !node.hasAttribute('disabled'));
         }
         firstUpdated(changedProperties) {
             super.firstUpdated(changedProperties);
@@ -70,19 +70,19 @@ export const MenuMixin = (superClass) => {
          * @returns The index of the target element in the menuItems array.
          */
         getCurrentIndex(target) {
-            return this.menuItems.findIndex((node) => node === target || node === target.parentElement);
+            return this.menuItems.findIndex(node => node === target || node === target.parentElement);
         }
         /**
          * Updates the placement of the popover based on the aria-orientation property.
          */
         updatePopoverPlacementBasedOnOrientation() {
             if (this.ariaOrientation === ORIENTATION.HORIZONTAL) {
-                this.menuPopoverItems.forEach((node) => {
+                this.menuPopoverItems.forEach(node => {
                     node.setAttribute('placement', POPOVER_PLACEMENT.BOTTOM_START);
                 });
             }
             else {
-                this.menuPopoverItems.forEach((node) => {
+                this.menuPopoverItems.forEach(node => {
                     node.setAttribute('placement', POPOVER_PLACEMENT.RIGHT_START);
                 });
             }
@@ -113,7 +113,7 @@ export const MenuMixin = (superClass) => {
          * @returns True if the tag name is a valid menu, false otherwise.
          */
         isValidMenu(tagName) {
-            return ((tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === MENUBAR_TAGNAME || this.isValidNavItemList(tagName));
+            return (tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === MENUBAR_TAGNAME || this.isValidNavItemList(tagName);
         }
         /**
          * Checks if the given tag name is a valid navitemlist tag name.
@@ -140,7 +140,7 @@ export const MenuMixin = (superClass) => {
             var _a, _b;
             if (this.isValidPopover((_b = (_a = this.menuItems[index]) === null || _a === void 0 ? void 0 : _a.nextElementSibling) === null || _b === void 0 ? void 0 : _b.tagName)) {
                 const currentMenuId = this.menuItems[index].getAttribute('id');
-                const result = this.menuPopoverItems.findIndex((node) => node.getAttribute('triggerid') === currentMenuId);
+                const result = this.menuPopoverItems.findIndex(node => node.getAttribute('triggerid') === currentMenuId);
                 if (result !== -1) {
                     if (!this.menuPopoverItems[result].hasAttribute('visible')) {
                         this.menuPopoverItems[result].toggleAttribute('visible');
@@ -212,7 +212,7 @@ export const MenuMixin = (superClass) => {
                 menu === null || menu === void 0 ? void 0 : menu.toggleAttribute('visible');
             }
             if (menu === null || menu === void 0 ? void 0 : menu.children) {
-                const menuChildren = Array.from(menu.children).filter((child) => this.isValidMenuItem(child));
+                const menuChildren = Array.from(menu.children).filter(child => this.isValidMenuItem(child));
                 this.resetTabIndexAndSetActiveTabIndex(menuChildren);
             }
             if (menu === null || menu === void 0 ? void 0 : menu.parentElement) {
@@ -228,8 +228,8 @@ export const MenuMixin = (superClass) => {
         navigateToPrevParentMenuItem(currentIndex, key) {
             var _a, _b, _c, _d, _e;
             const parentMenuItem = (_a = this.menuItems[currentIndex].parentElement) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
-            const parentMenuItemsChildren = Array.from(((_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.children) || []).filter((node) => this.isValidMenuItem(node));
-            const parentMenuItemIndex = parentMenuItemsChildren.findIndex((node) => node === parentMenuItem);
+            const parentMenuItemsChildren = Array.from(((_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.children) || []).filter(node => this.isValidMenuItem(node));
+            const parentMenuItemIndex = parentMenuItemsChildren.findIndex(node => node === parentMenuItem);
             let newIndex = parentMenuItemIndex;
             if (key === KEYS.ARROW_LEFT && this.isValidMenu((_c = this.parentElement) === null || _c === void 0 ? void 0 : _c.tagName)) {
                 newIndex = parentMenuItemIndex - 1;
@@ -257,7 +257,7 @@ export const MenuMixin = (superClass) => {
         getParentMenuContents(currentMenuItem) {
             var _a;
             const parentMenuItemDetails = this.getParentMenuItemDetails('', currentMenuItem);
-            const parentMenuItemsChildren = Array.from(((_a = parentMenuItemDetails.menu) === null || _a === void 0 ? void 0 : _a.children) || []).filter((node) => this.isValidMenuItem(node));
+            const parentMenuItemsChildren = Array.from(((_a = parentMenuItemDetails.menu) === null || _a === void 0 ? void 0 : _a.children) || []).filter(node => this.isValidMenuItem(node));
             return { parentMenuItemDetails, parentMenuItemsChildren };
         }
         /**
@@ -278,12 +278,12 @@ export const MenuMixin = (superClass) => {
             if (this.isValidMenu(this.tagName))
                 return;
             // - get the top parent menu items using recursion.
-            const { parentMenuItemDetails, parentMenuItemsChildren, } = this.getParentMenuContents(this.menuItems[currentIndex]);
+            const { parentMenuItemDetails, parentMenuItemsChildren } = this.getParentMenuContents(this.menuItems[currentIndex]);
             if (parentMenuItemsChildren.length === 0 || (parentMenuItemDetails === null || parentMenuItemDetails === void 0 ? void 0 : parentMenuItemDetails.menuChildId) === '') {
                 this.navigateToNextMenuItem(currentIndex, 0, this.menuItems.length - 1, this.ariaOrientation);
                 return;
             }
-            const parentMenuItemIndex = parentMenuItemsChildren.findIndex((node) => node.getAttribute('id') === (parentMenuItemDetails === null || parentMenuItemDetails === void 0 ? void 0 : parentMenuItemDetails.menuChildId));
+            const parentMenuItemIndex = parentMenuItemsChildren.findIndex(node => node.getAttribute('id') === (parentMenuItemDetails === null || parentMenuItemDetails === void 0 ? void 0 : parentMenuItemDetails.menuChildId));
             const newIndex = parentMenuItemIndex === -1 ? currentIndex + 1 : parentMenuItemIndex + 1;
             this.updateTabIndexAndFocusNewIndex(parentMenuItemsChildren, parentMenuItemIndex, newIndex);
             (_b = (_a = parentMenuItemsChildren[newIndex]) === null || _a === void 0 ? void 0 : _a.nextElementSibling) === null || _b === void 0 ? void 0 : _b.toggleAttribute('visible');
@@ -296,8 +296,8 @@ export const MenuMixin = (superClass) => {
         isValidMenuItem(menuItem) {
             const validRoles = [ROLE.MENUITEM, ROLE.MENUITEMCHECKBOX, ROLE.MENUITEMRADIO];
             const role = menuItem.getAttribute('role');
-            return role !== null
-                && validRoles.includes(role);
+            return (role !== null &&
+                validRoles.includes(role));
         }
         /**
          * Resets all list items tabindex to -1 and sets the tabindex of the
@@ -322,8 +322,8 @@ export const MenuMixin = (superClass) => {
         getKeyBasedOnDirection(originalKey) {
             var _a;
             let key = originalKey;
-            const isRtl = ((_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.getAttribute('dir')) === 'rtl'
-                || window.getComputedStyle(this).direction === 'rtl';
+            const isRtl = ((_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.getAttribute('dir')) === 'rtl' ||
+                window.getComputedStyle(this).direction === 'rtl';
             if (isRtl && (key === KEYS.ARROW_LEFT || key === KEYS.ARROW_RIGHT)) {
                 if (key === KEYS.ARROW_LEFT) {
                     key = KEYS.ARROW_RIGHT;
@@ -441,9 +441,9 @@ export const MenuMixin = (superClass) => {
          */
         closeAllPopoversExceptCurrent(currentIndex) {
             this.menuPopoverItems
-                .filter((node) => node !== this.menuItems[currentIndex])
-                .filter((node) => node.hasAttribute('visible'))
-                .forEach((node) => node.toggleAttribute('visible'));
+                .filter(node => node !== this.menuItems[currentIndex])
+                .filter(node => node.hasAttribute('visible'))
+                .forEach(node => node.toggleAttribute('visible'));
         }
         /**
          * Handles the mouse click event on the menu items.

package/dist/utils/mixins/PreventScrollMixin.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
-import type { Constructor } from './index.types';
 import type { Component } from '../../models';
+import type { Constructor } from './index.types';
 export declare abstract class PreventScrollMixinInterface {
     protected abstract preventScroll?: boolean;
     protected activatePreventScroll(): void;

package/dist/utils/styles/index.js

@@ -9,19 +9,19 @@ const hostFitContentStyles = css `
   }
 `;
 const baseHostStyleVariables = css `
-    :host {
-      --mdc-focus-ring-inner-color: var(--mds-color-theme-focus-default-0);
-      --mdc-focus-ring-middle-color: var(--mds-color-theme-focus-default-1);
-      --mdc-focus-ring-outer-color: var(--mds-color-theme-focus-default-2);
+  :host {
+    --mdc-focus-ring-inner-color: var(--mds-color-theme-focus-default-0);
+    --mdc-focus-ring-middle-color: var(--mds-color-theme-focus-default-1);
+    --mdc-focus-ring-outer-color: var(--mds-color-theme-focus-default-2);
 
-      --mdc-focus-ring-inner-width: 0.125rem;
-      --mdc-focus-ring-middle-width: calc(2 * var(--mdc-focus-ring-inner-width));
-      --mdc-focus-ring-outer-width: calc(0.0625rem + var(--mdc-focus-ring-middle-width));
+    --mdc-focus-ring-inner-width: 0.125rem;
+    --mdc-focus-ring-middle-width: calc(2 * var(--mdc-focus-ring-inner-width));
+    --mdc-focus-ring-outer-width: calc(0.0625rem + var(--mdc-focus-ring-middle-width));
 
-      --mdc-focus-ring-middle-offset: var(--mdc-focus-ring-inner-width);
-      --mdc-focus-ring-outer-offset: calc(var(--mdc-focus-ring-inner-width) + var(--mdc-focus-ring-middle-width));
-    }
-  `;
+    --mdc-focus-ring-middle-offset: var(--mdc-focus-ring-inner-width);
+    --mdc-focus-ring-outer-offset: calc(var(--mdc-focus-ring-inner-width) + var(--mdc-focus-ring-middle-width));
+  }
+`;
 const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
     const boxShadow = css `0 0 0 var(--mdc-focus-ring-inner-width) var(--mdc-focus-ring-inner-color),
     0 0 0 var(--mdc-focus-ring-middle-width) var(--mdc-focus-ring-middle-color),
@@ -44,7 +44,7 @@ const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
         }
         /* Remove focus ring from parent when children has its own focus ring.
             The child element must have class name own-focus-ring */
-        .mdc-focus-ring:has(.own-focus-ring:focus-visible){
+        .mdc-focus-ring:has(.own-focus-ring:focus-visible) {
           box-shadow: none;
         }
 

package/package.json

@@ -41,5 +41,5 @@
     "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"
   },
-  "version": "0.84.3"
+  "version": "0.84.5"
 }