@momentum-design/components 0.9.2 → 0.9.4

package/dist/components/badge/badge.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResult, PropertyValues, TemplateResult } from 'lit';
 import { Component } from '../../models';
-import IconNames from '../../../../assets/icons/dist/types/types';
+import type { IconNames } from '../icon/icon.types';
 import type { IconVariant, BadgeType } from './badge.types';
 /**
  * The `mdc-badge` component is a versatile UI element used to

package/dist/components/badge/badge.styles.js

@@ -64,6 +64,13 @@ const styles = [
       background-color: var(--mdc-badge-secondary-background-color);
       color: var(--mdc-badge-secondary-foreground-color);
     }
+
+    /* High Contrast Mode */
+    @media (forced-colors: active) {
+    .mdc-badge-dot, .mdc-badge-icon, .mdc-badge-text {
+      outline: 0.125rem solid;
+    }
+  }
   `,
 ];
 export default styles;

package/dist/components/icon/icon.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResult } from 'lit';
 import { Component } from '../../models';
-import IconNames from '../../../../assets/icons/dist/types/types';
+import type { IconNames } from './icon.types';
 /**
  * Icon component that dynamically displays SVG icons based on a valid name.
  *

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

@@ -0,0 +1,2 @@
+import type IconNames from '@momentum-design/icons/dist/types/types';
+export type { IconNames };

package/dist/components/icon/icon.types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/styles/index.js

@@ -12,7 +12,7 @@ const hostFocusRingStyles = 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);
+    --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));
@@ -29,5 +29,12 @@ const hostFocusRingStyles = css `
         0 0 0 var(--mdc-focus-ring-middle-width) var(--mdc-focus-ring-middle-color),
         0 0 0 var(--mdc-focus-ring-outer-width) var(--mdc-focus-ring-outer-color);
   }
+
+  /* High Contrast Mode */
+  @media (forced-colors: active) {
+    :host(:focus) {
+      outline: 0.125rem solid var(--mds-color-theme-focus-default-0);
+    }
+  }
 `;
 export { hostFitContentStyles, hostFocusRingStyles };

package/package.json

@@ -35,5 +35,5 @@
     "@momentum-design/tokens": "*",
     "lit": "^3.2.0"
   },
-  "version": "0.9.2"
+  "version": "0.9.4"
 }