@momentum-design/components 0.16.2 → 0.16.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/browser/index.js +82 -65
- package/dist/browser/index.js.map +4 -4
- package/dist/components/avatarbutton/avatarbutton.styles.js +1 -1
- package/dist/components/button/button.component.d.ts +0 -5
- package/dist/components/button/button.component.js +0 -9
- package/dist/components/buttonsimple/buttonsimple.component.d.ts +2 -12
- package/dist/components/buttonsimple/buttonsimple.component.js +3 -20
- package/dist/components/buttonsimple/buttonsimple.styles.js +1 -1
- package/dist/custom-elements.json +141 -110
- package/dist/utils/mixins/DisabledMixin.js +5 -0
- package/dist/utils/mixins/TabIndexMixin.js +5 -1
- package/dist/utils/styles/index.d.ts +1 -1
- package/dist/utils/styles/index.js +58 -28
- package/package.json +1 -1
|
@@ -8,35 +8,65 @@ const hostFitContentStyles = css `
|
|
|
8
8
|
width: fit-content;
|
|
9
9
|
}
|
|
10
10
|
`;
|
|
11
|
-
const hostFocusRingStyles =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
--mdc-focus-ring-inner-width: 0.125rem;
|
|
18
|
-
--mdc-focus-ring-middle-width: calc(2 * var(--mdc-focus-ring-inner-width));
|
|
19
|
-
--mdc-focus-ring-outer-width: calc(0.0625rem + var(--mdc-focus-ring-middle-width));
|
|
11
|
+
const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
|
|
12
|
+
const baseHostStyleVariables = css `
|
|
13
|
+
:host {
|
|
14
|
+
--mdc-focus-ring-inner-color: var(--mds-color-theme-focus-default-0);
|
|
15
|
+
--mdc-focus-ring-middle-color: var(--mds-color-theme-focus-default-1);
|
|
16
|
+
--mdc-focus-ring-outer-color: var(--mds-color-theme-focus-default-2);
|
|
20
17
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
:host([disabled]:focus) {
|
|
25
|
-
box-shadow: none;
|
|
26
|
-
}
|
|
27
|
-
:host(:focus) {
|
|
28
|
-
position: relative;
|
|
29
|
-
box-shadow:
|
|
30
|
-
0 0 0 var(--mdc-focus-ring-inner-width) var(--mdc-focus-ring-inner-color),
|
|
31
|
-
0 0 0 var(--mdc-focus-ring-middle-width) var(--mdc-focus-ring-middle-color),
|
|
32
|
-
0 0 0 var(--mdc-focus-ring-outer-width) var(--mdc-focus-ring-outer-color);
|
|
33
|
-
}
|
|
18
|
+
--mdc-focus-ring-inner-width: 0.125rem;
|
|
19
|
+
--mdc-focus-ring-middle-width: calc(2 * var(--mdc-focus-ring-inner-width));
|
|
20
|
+
--mdc-focus-ring-outer-width: calc(0.0625rem + var(--mdc-focus-ring-middle-width));
|
|
34
21
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
:host(:focus) {
|
|
38
|
-
outline: 0.125rem solid var(--mds-color-theme-focus-default-0);
|
|
22
|
+
--mdc-focus-ring-middle-offset: var(--mdc-focus-ring-inner-width);
|
|
23
|
+
--mdc-focus-ring-outer-offset: calc(var(--mdc-focus-ring-inner-width) + var(--mdc-focus-ring-middle-width));
|
|
39
24
|
}
|
|
40
|
-
|
|
41
|
-
|
|
25
|
+
`;
|
|
26
|
+
const boxShadow = css `0 0 0 var(--mdc-focus-ring-inner-width) var(--mdc-focus-ring-inner-color),
|
|
27
|
+
0 0 0 var(--mdc-focus-ring-middle-width) var(--mdc-focus-ring-middle-color),
|
|
28
|
+
0 0 0 var(--mdc-focus-ring-outer-width) var(--mdc-focus-ring-outer-color)
|
|
29
|
+
`;
|
|
30
|
+
if (applyFocusRingOnClass) {
|
|
31
|
+
return [
|
|
32
|
+
baseHostStyleVariables,
|
|
33
|
+
css `
|
|
34
|
+
.mdc-focus-ring:focus-visible {
|
|
35
|
+
outline: none;
|
|
36
|
+
}
|
|
37
|
+
:host([disabled]) .mdc-focus-ring:focus {
|
|
38
|
+
box-shadow: none;
|
|
39
|
+
}
|
|
40
|
+
.mdc-focus-ring:focus-within {
|
|
41
|
+
position: relative;
|
|
42
|
+
box-shadow: ${boxShadow};
|
|
43
|
+
}
|
|
44
|
+
/* High Contrast Mode */
|
|
45
|
+
@media (forced-colors: active) {
|
|
46
|
+
.mdc-focus-ring:focus-within {
|
|
47
|
+
outline: 0.125rem solid var(--mds-color-theme-focus-default-0);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
`,
|
|
51
|
+
];
|
|
52
|
+
}
|
|
53
|
+
return [
|
|
54
|
+
baseHostStyleVariables,
|
|
55
|
+
css `
|
|
56
|
+
:host([disabled]:focus) {
|
|
57
|
+
box-shadow: none;
|
|
58
|
+
}
|
|
59
|
+
:host(:focus) {
|
|
60
|
+
position: relative;
|
|
61
|
+
box-shadow: ${boxShadow};
|
|
62
|
+
}
|
|
63
|
+
/* High Contrast Mode */
|
|
64
|
+
@media (forced-colors: active) {
|
|
65
|
+
:host(:focus) {
|
|
66
|
+
outline: 0.125rem solid var(--mds-color-theme-focus-default-0);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
`,
|
|
70
|
+
];
|
|
71
|
+
};
|
|
42
72
|
export { hostFitContentStyles, hostFocusRingStyles };
|
package/package.json
CHANGED