@momentum-design/components 0.4.6 → 0.4.8

package/dist/utils/styles/index.d.ts

@@ -1,2 +1,3 @@
 declare const hostFitContentStyles: import("lit").CSSResult;
-export { hostFitContentStyles };
+declare const hostFocusRingStyles: import("lit").CSSResult;
+export { hostFitContentStyles, hostFocusRingStyles };

package/dist/utils/styles/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hostFitContentStyles = void 0;
+exports.hostFocusRingStyles = exports.hostFitContentStyles = void 0;
 const lit_1 = require("lit");
 const hostFitContentStyles = (0, lit_1.css) `
   :host {
@@ -12,3 +12,26 @@ const hostFitContentStyles = (0, lit_1.css) `
   }
 `;
 exports.hostFitContentStyles = hostFitContentStyles;
+const hostFocusRingStyles = (0, lit_1.css) `
+  :host {
+    --mdc-focus-ring-inner-color: var(--mds-color-theme-focus-0);
+    --mdc-focus-ring-middle-color: var(--mds-color-theme-focus-1);
+    --mdc-focus-ring-outer-color: var(--mds-color-theme-focus-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-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));
+  }
+  
+  :host(:focus) {
+    position: relative;
+    box-shadow: 
+        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),
+        0 0 0 var(--mdc-focus-ring-outer-width) var(--mdc-focus-ring-outer-color);
+  }
+`;
+exports.hostFocusRingStyles = hostFocusRingStyles;

package/package.json

@@ -37,5 +37,5 @@
     "@momentum-design/icons": "*",
     "@momentum-design/tokens": "*"
   },
-  "version": "0.4.6"
+  "version": "0.4.8"
 }