@momentum-design/components 0.16.17 → 0.16.18

package/dist/react/index.d.ts

@@ -8,6 +8,7 @@ export { default as Divider } from './divider';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
+export { default as Link } from './link';
 export { default as Marker } from './marker';
 export { default as Modalcontainer } from './modalcontainer';
 export { default as Presence } from './presence';

package/dist/react/index.js

@@ -8,6 +8,7 @@ export { default as Divider } from './divider';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
+export { default as Link } from './link';
 export { default as Marker } from './marker';
 export { default as Modalcontainer } from './modalcontainer';
 export { default as Presence } from './presence';

package/dist/react/link/index.d.ts

@@ -0,0 +1,29 @@
+import Component from '../../components/link';
+/**
+ * `mdc-link` component can be used to navigate to a different page
+ * within the application or to an external site. It can be used to link to
+ * emails or phone numbers.
+ *
+ * The `children` of the link component is expected to be an anchor element
+ * containing the text, href, and other attributes.
+ *
+ * For `icon`, the `mdc-icon` component is used to render the icon.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-link
+ *
+ * @cssproperty --mdc-link-border-radius - Border radius of the link
+ * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state
+ * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state
+ * @cssproperty --mdc-link-color-hover - Text and icon color of the link in hover state
+ * @cssproperty --mdc-link-color-normal - Text and icon color of the link in normal state
+ * @cssproperty --mdc-link-icon-margin-left - Gap between the text and icon (only applicable when an icon is set)
+ * @cssproperty --mdc-link-inverted-color-active - Text and icon color of the inverted link in active state
+ * @cssproperty --mdc-link-inverted-color-disabled - Text and icon color of the inverted link in disabled state
+ * @cssproperty --mdc-link-inverted-color-hover - Text and icon color of the inverted link in hover state
+ * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state
+ * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/link/index.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/link';
+import { TAG_NAME } from '../../components/link/link.constants';
+/**
+ * `mdc-link` component can be used to navigate to a different page
+ * within the application or to an external site. It can be used to link to
+ * emails or phone numbers.
+ *
+ * The `children` of the link component is expected to be an anchor element
+ * containing the text, href, and other attributes.
+ *
+ * For `icon`, the `mdc-icon` component is used to render the icon.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-link
+ *
+ * @cssproperty --mdc-link-border-radius - Border radius of the link
+ * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state
+ * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state
+ * @cssproperty --mdc-link-color-hover - Text and icon color of the link in hover state
+ * @cssproperty --mdc-link-color-normal - Text and icon color of the link in normal state
+ * @cssproperty --mdc-link-icon-margin-left - Gap between the text and icon (only applicable when an icon is set)
+ * @cssproperty --mdc-link-inverted-color-active - Text and icon color of the inverted link in active state
+ * @cssproperty --mdc-link-inverted-color-disabled - Text and icon color of the inverted link in disabled state
+ * @cssproperty --mdc-link-inverted-color-hover - Text and icon color of the inverted link in hover state
+ * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state
+ * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Link',
+});
+export default reactWrapper;

package/dist/utils/styles/index.js

@@ -56,13 +56,13 @@ const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
       :host([disabled]:focus) {
         box-shadow: none;
       }
-      :host(:focus) {
+      :host(:focus), :host(:focus-within) {
         position: relative;
         box-shadow: ${boxShadow};
       }
       /* High Contrast Mode */
       @media (forced-colors: active) {
-        :host(:focus) {
+        :host(:focus), :host(:focus-within) {
           outline: 0.125rem solid var(--mds-color-theme-focus-default-0);
         }
       }

package/package.json

@@ -36,5 +36,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.16.17"
+  "version": "0.16.18"
 }