@mattilsynet/design 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/mtds/chip/chip.stories.d.ts +1 -0
- package/mtds/divider/divider.d.ts +2 -2
- package/mtds/divider/divider.js.map +1 -1
- package/mtds/index.iife.js +3 -3
- package/mtds/index.iife.js.map +1 -1
- package/mtds/layout/layout.d.ts +1 -1
- package/mtds/layout/layout.js.map +1 -1
- package/mtds/layout/layout.stories.d.ts +1 -0
- package/mtds/popover/popover-observer.js +14 -14
- package/mtds/popover/popover-observer.js.map +1 -1
- package/mtds/skeleton/skeleton.stories.d.ts +1 -0
- package/mtds/styles.css +1 -1
- package/mtds/styles.json +34 -34
- package/mtds/styles.module.css.js +64 -60
- package/mtds/styles.module.css.js.map +1 -1
- package/mtds/tailwind.css +134 -0
- package/mtds/tokens.d.ts +3 -0
- package/mtds/tooltip/tooltip-observer.js +5 -5
- package/mtds/tooltip/tooltip-observer.js.map +1 -1
- package/mtds/typography/typography.stories.d.ts +1 -1
- package/mtds/utils.d.ts +1 -1
- package/mtds/utils.js +1 -1
- package/mtds/utils.js.map +1 -1
- package/package.json +3 -2
package/mtds/styles.json
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
1
|
{
|
|
2
|
-
"alert": "
|
|
3
|
-
"avatar": "
|
|
4
|
-
"badge": "
|
|
5
|
-
"breadcrumbs": "
|
|
6
|
-
"button": "
|
|
7
|
-
"card": "
|
|
8
|
-
"info": "
|
|
9
|
-
"group": "
|
|
10
|
-
"chip": "
|
|
11
|
-
"details": "
|
|
12
|
-
"dialog": "
|
|
13
|
-
"divider": "
|
|
14
|
-
"errorsummary": "
|
|
15
|
-
"field": "
|
|
16
|
-
"affixes": "
|
|
17
|
-
"fieldset": "
|
|
18
|
-
"helptext": "
|
|
19
|
-
"input": "
|
|
20
|
-
"app": "
|
|
21
|
-
"grid": "
|
|
22
|
-
"flex": "
|
|
23
|
-
"link": "
|
|
24
|
-
"logo": "
|
|
25
|
-
"pagination": "
|
|
26
|
-
"popover": "
|
|
27
|
-
"skeleton": "
|
|
28
|
-
"spinner": "
|
|
29
|
-
"table": "
|
|
30
|
-
"tabs": "
|
|
31
|
-
"tag": "
|
|
32
|
-
"heading": "
|
|
33
|
-
"prose": "
|
|
34
|
-
"validation": "
|
|
35
|
-
"body": "
|
|
2
|
+
"alert": "_alert_cq24j_1 _ds-alert_z5gp5_1",
|
|
3
|
+
"avatar": "_avatar_cq24j_1 _ds-avatar_z5gp5_1",
|
|
4
|
+
"badge": "_badge_cq24j_1",
|
|
5
|
+
"breadcrumbs": "_breadcrumbs_cq24j_1 _ds-breadcrumbs_z5gp5_1",
|
|
6
|
+
"button": "_button_cq24j_1 _ds-button_z5gp5_1",
|
|
7
|
+
"card": "_card_cq24j_1",
|
|
8
|
+
"info": "_info_cq24j_1",
|
|
9
|
+
"group": "_group_cq24j_1",
|
|
10
|
+
"chip": "_chip_cq24j_1 _ds-chip_z5gp5_1",
|
|
11
|
+
"details": "_details_cq24j_1 _ds-details_z5gp5_1",
|
|
12
|
+
"dialog": "_dialog_cq24j_1 _ds-dialog_z5gp5_1",
|
|
13
|
+
"divider": "_divider_cq24j_1",
|
|
14
|
+
"errorsummary": "_errorsummary_cq24j_1 _ds-error-summary_z5gp5_1",
|
|
15
|
+
"field": "_field_cq24j_1 _ds-field_z5gp5_1",
|
|
16
|
+
"affixes": "_affixes_cq24j_1 _ds-field-affixes_z5gp5_1",
|
|
17
|
+
"fieldset": "_fieldset_cq24j_1 _ds-fieldset_z5gp5_1",
|
|
18
|
+
"helptext": "_helptext_cq24j_1 _ds-focus_z5gp5_1",
|
|
19
|
+
"input": "_input_cq24j_1 _ds-input_z5gp5_1",
|
|
20
|
+
"app": "_app_cq24j_1",
|
|
21
|
+
"grid": "_grid_cq24j_1",
|
|
22
|
+
"flex": "_flex_cq24j_1",
|
|
23
|
+
"link": "_link_cq24j_1",
|
|
24
|
+
"logo": "_logo_cq24j_1",
|
|
25
|
+
"pagination": "_pagination_cq24j_1 _ds-pagination_z5gp5_1",
|
|
26
|
+
"popover": "_popover_cq24j_1",
|
|
27
|
+
"skeleton": "_skeleton_cq24j_1 _ds-skeleton_z5gp5_1",
|
|
28
|
+
"spinner": "_spinner_cq24j_1",
|
|
29
|
+
"table": "_table_cq24j_1 _ds-table_z5gp5_1",
|
|
30
|
+
"tabs": "_tabs_cq24j_1 _ds-tabs_z5gp5_1",
|
|
31
|
+
"tag": "_tag_cq24j_1 _ds-tag_z5gp5_1",
|
|
32
|
+
"heading": "_heading_cq24j_1 _ds-heading_z5gp5_1",
|
|
33
|
+
"prose": "_prose_cq24j_1",
|
|
34
|
+
"validation": "_validation_cq24j_1 _ds-validation-message_z5gp5_1",
|
|
35
|
+
"body": "_body_cq24j_109"
|
|
36
36
|
}
|
|
@@ -1,78 +1,82 @@
|
|
|
1
|
-
const _ = "
|
|
1
|
+
const _ = "_alert_cq24j_1 _ds-alert_z5gp5_1", t = "_avatar_cq24j_1 _ds-avatar_z5gp5_1", s = "_badge_cq24j_1", o = "_breadcrumbs_cq24j_1 _ds-breadcrumbs_z5gp5_1", c = "_button_cq24j_1 _ds-button_z5gp5_1", e = "_card_cq24j_1", a = "_info_cq24j_1", n = "_group_cq24j_1", d = "_chip_cq24j_1 _ds-chip_z5gp5_1", i = "_details_cq24j_1 _ds-details_z5gp5_1", r = "_dialog_cq24j_1 _ds-dialog_z5gp5_1", p = "_divider_cq24j_1", l = "_errorsummary_cq24j_1 _ds-error-summary_z5gp5_1", g = "__errorsummary_cq24j_1", j = "_field_cq24j_1 _ds-field_z5gp5_1", q = "_affixes_cq24j_1 _ds-field-affixes_z5gp5_1", b = "_fieldset_cq24j_1 _ds-fieldset_z5gp5_1", f = "_helptext_cq24j_1 _ds-focus_z5gp5_1", u = "_input_cq24j_1 _ds-input_z5gp5_1", z = "_app_cq24j_1", m = "_grid_cq24j_1", h = "_flex_cq24j_1", v = "_link_cq24j_1", x = "_logo_cq24j_1", y = "_pagination_cq24j_1 _ds-pagination_z5gp5_1", k = "_popover_cq24j_1", w = "_skeleton_cq24j_1 _ds-skeleton_z5gp5_1", S = "__skeleton_cq24j_1", A = "_spinner_cq24j_1", B = "_table_cq24j_1 _ds-table_z5gp5_1", C = "__scrollShadow_cq24j_1", D = "_tabs_cq24j_1 _ds-tabs_z5gp5_1", E = "_tag_cq24j_1 _ds-tag_z5gp5_1", F = "__tooltip_cq24j_1", G = "_heading_cq24j_1 _ds-heading_z5gp5_1", H = "_prose_cq24j_1", I = "_validation_cq24j_1 _ds-validation-message_z5gp5_1", J = "_body_cq24j_109", K = {
|
|
2
2
|
alert: _,
|
|
3
3
|
avatar: t,
|
|
4
4
|
badge: s,
|
|
5
5
|
breadcrumbs: o,
|
|
6
|
-
button:
|
|
6
|
+
button: c,
|
|
7
7
|
card: e,
|
|
8
|
-
info:
|
|
9
|
-
group:
|
|
10
|
-
chip:
|
|
11
|
-
details:
|
|
8
|
+
info: a,
|
|
9
|
+
group: n,
|
|
10
|
+
chip: d,
|
|
11
|
+
details: i,
|
|
12
12
|
dialog: r,
|
|
13
|
-
divider:
|
|
13
|
+
divider: p,
|
|
14
14
|
errorsummary: l,
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
15
|
+
_errorsummary: g,
|
|
16
|
+
field: j,
|
|
17
|
+
affixes: q,
|
|
18
|
+
fieldset: b,
|
|
19
|
+
helptext: f,
|
|
20
|
+
input: u,
|
|
21
|
+
app: z,
|
|
22
|
+
grid: m,
|
|
23
|
+
flex: h,
|
|
24
|
+
link: v,
|
|
25
|
+
logo: x,
|
|
26
|
+
pagination: y,
|
|
27
|
+
popover: k,
|
|
28
|
+
skeleton: w,
|
|
29
|
+
_skeleton: S,
|
|
30
|
+
spinner: A,
|
|
31
|
+
table: B,
|
|
32
|
+
_scrollShadow: C,
|
|
33
|
+
tabs: D,
|
|
34
|
+
tag: E,
|
|
35
|
+
_tooltip: F,
|
|
36
|
+
heading: G,
|
|
37
|
+
prose: H,
|
|
38
|
+
validation: I,
|
|
39
|
+
body: J
|
|
38
40
|
};
|
|
39
41
|
export {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
42
|
+
g as _errorsummary,
|
|
43
|
+
C as _scrollShadow,
|
|
44
|
+
S as _skeleton,
|
|
45
|
+
F as _tooltip,
|
|
46
|
+
q as affixes,
|
|
43
47
|
_ as alert,
|
|
44
|
-
|
|
48
|
+
z as app,
|
|
45
49
|
t as avatar,
|
|
46
50
|
s as badge,
|
|
47
|
-
|
|
51
|
+
J as body,
|
|
48
52
|
o as breadcrumbs,
|
|
49
|
-
|
|
53
|
+
c as button,
|
|
50
54
|
e as card,
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
55
|
+
d as chip,
|
|
56
|
+
K as default,
|
|
57
|
+
i as details,
|
|
54
58
|
r as dialog,
|
|
55
|
-
|
|
59
|
+
p as divider,
|
|
56
60
|
l as errorsummary,
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
61
|
+
j as field,
|
|
62
|
+
b as fieldset,
|
|
63
|
+
h as flex,
|
|
64
|
+
m as grid,
|
|
65
|
+
n as group,
|
|
66
|
+
G as heading,
|
|
67
|
+
f as helptext,
|
|
68
|
+
a as info,
|
|
69
|
+
u as input,
|
|
70
|
+
v as link,
|
|
71
|
+
x as logo,
|
|
72
|
+
y as pagination,
|
|
73
|
+
k as popover,
|
|
74
|
+
H as prose,
|
|
75
|
+
w as skeleton,
|
|
76
|
+
A as spinner,
|
|
77
|
+
B as table,
|
|
78
|
+
D as tabs,
|
|
79
|
+
E as tag,
|
|
80
|
+
I as validation
|
|
77
81
|
};
|
|
78
82
|
//# sourceMappingURL=styles.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
@theme {
|
|
2
|
+
--font-default: var(--ds-font-family);
|
|
3
|
+
--spacing-0: var(--mtds-0);
|
|
4
|
+
--spacing-1: var(--mtds-1);
|
|
5
|
+
--spacing-2: var(--mtds-2);
|
|
6
|
+
--spacing-3: var(--mtds-3);
|
|
7
|
+
--spacing-4: var(--mtds-4);
|
|
8
|
+
--spacing-5: var(--mtds-5);
|
|
9
|
+
--spacing-6: var(--mtds-6);
|
|
10
|
+
--spacing-7: var(--mtds-7);
|
|
11
|
+
--spacing-8: var(--mtds-8);
|
|
12
|
+
--spacing-9: var(--mtds-9);
|
|
13
|
+
--radius-full: var(--mtds-border-radius-full);
|
|
14
|
+
--radius-lg: var(--mtds-border-radius-lg);
|
|
15
|
+
--radius-sm: var(--mtds-border-radius-sm);
|
|
16
|
+
--radius-xl: var(--mtds-border-radius-xl);
|
|
17
|
+
--color-background-default: var(--mtds-color-background-default);
|
|
18
|
+
--color-background-tinted: var(--mtds-color-background-tinted);
|
|
19
|
+
--color-base-active: var(--mtds-color-base-active);
|
|
20
|
+
--color-base-contrast-default: var(--mtds-color-base-contrast-default);
|
|
21
|
+
--color-base-contrast-subtle: var(--mtds-color-base-contrast-subtle);
|
|
22
|
+
--color-base-default: var(--mtds-color-base-default);
|
|
23
|
+
--color-base-hover: var(--mtds-color-base-hover);
|
|
24
|
+
--color-border-default: var(--mtds-color-border-default);
|
|
25
|
+
--color-border-strong: var(--mtds-color-border-strong);
|
|
26
|
+
--color-border-subtle: var(--mtds-color-border-subtle);
|
|
27
|
+
--color-danger-background-default: var(--mtds-color-danger-background-default);
|
|
28
|
+
--color-danger-background-tinted: var(--mtds-color-danger-background-tinted);
|
|
29
|
+
--color-danger-base-active: var(--mtds-color-danger-base-active);
|
|
30
|
+
--color-danger-base-contrast-default: var(--mtds-color-danger-base-contrast-default);
|
|
31
|
+
--color-danger-base-contrast-subtle: var(--mtds-color-danger-base-contrast-subtle);
|
|
32
|
+
--color-danger-base-default: var(--mtds-color-danger-base-default);
|
|
33
|
+
--color-danger-base-hover: var(--mtds-color-danger-base-hover);
|
|
34
|
+
--color-danger-border-default: var(--mtds-color-danger-border-default);
|
|
35
|
+
--color-danger-border-strong: var(--mtds-color-danger-border-strong);
|
|
36
|
+
--color-danger-border-subtle: var(--mtds-color-danger-border-subtle);
|
|
37
|
+
--color-danger-surface-active: var(--mtds-color-danger-surface-active);
|
|
38
|
+
--color-danger-surface-default: var(--mtds-color-danger-surface-default);
|
|
39
|
+
--color-danger-surface-hover: var(--mtds-color-danger-surface-hover);
|
|
40
|
+
--color-danger-surface-tinted: var(--mtds-color-danger-surface-tinted);
|
|
41
|
+
--color-danger-text-default: var(--mtds-color-danger-text-default);
|
|
42
|
+
--color-danger-text-subtle: var(--mtds-color-danger-text-subtle);
|
|
43
|
+
--color-info-background-default: var(--mtds-color-info-background-default);
|
|
44
|
+
--color-info-background-tinted: var(--mtds-color-info-background-tinted);
|
|
45
|
+
--color-info-base-active: var(--mtds-color-info-base-active);
|
|
46
|
+
--color-info-base-contrast-default: var(--mtds-color-info-base-contrast-default);
|
|
47
|
+
--color-info-base-contrast-default : var(--mtds-color-info-base-contrast-default );
|
|
48
|
+
--color-info-base-contrast-subtle: var(--mtds-color-info-base-contrast-subtle);
|
|
49
|
+
--color-info-base-default: var(--mtds-color-info-base-default);
|
|
50
|
+
--color-info-base-hover: var(--mtds-color-info-base-hover);
|
|
51
|
+
--color-info-border-default: var(--mtds-color-info-border-default);
|
|
52
|
+
--color-info-border-strong: var(--mtds-color-info-border-strong);
|
|
53
|
+
--color-info-border-subtle: var(--mtds-color-info-border-subtle);
|
|
54
|
+
--color-info-surface-active: var(--mtds-color-info-surface-active);
|
|
55
|
+
--color-info-surface-default: var(--mtds-color-info-surface-default);
|
|
56
|
+
--color-info-surface-hover: var(--mtds-color-info-surface-hover);
|
|
57
|
+
--color-info-surface-tinted: var(--mtds-color-info-surface-tinted);
|
|
58
|
+
--color-info-text-default: var(--mtds-color-info-text-default);
|
|
59
|
+
--color-info-text-subtle: var(--mtds-color-info-text-subtle);
|
|
60
|
+
--color-main-background-default: var(--mtds-color-main-background-default);
|
|
61
|
+
--color-main-background-tinted: var(--mtds-color-main-background-tinted);
|
|
62
|
+
--color-main-base-active: var(--mtds-color-main-base-active);
|
|
63
|
+
--color-main-base-contrast-default: var(--mtds-color-main-base-contrast-default);
|
|
64
|
+
--color-main-base-contrast-subtle: var(--mtds-color-main-base-contrast-subtle);
|
|
65
|
+
--color-main-base-default: var(--mtds-color-main-base-default);
|
|
66
|
+
--color-main-base-hover: var(--mtds-color-main-base-hover);
|
|
67
|
+
--color-main-border-default: var(--mtds-color-main-border-default);
|
|
68
|
+
--color-main-border-strong: var(--mtds-color-main-border-strong);
|
|
69
|
+
--color-main-border-subtle: var(--mtds-color-main-border-subtle);
|
|
70
|
+
--color-main-surface-active: var(--mtds-color-main-surface-active);
|
|
71
|
+
--color-main-surface-default: var(--mtds-color-main-surface-default);
|
|
72
|
+
--color-main-surface-hover: var(--mtds-color-main-surface-hover);
|
|
73
|
+
--color-main-surface-tinted: var(--mtds-color-main-surface-tinted);
|
|
74
|
+
--color-main-text-default: var(--mtds-color-main-text-default);
|
|
75
|
+
--color-main-text-subtle: var(--mtds-color-main-text-subtle);
|
|
76
|
+
--color-neutral-background-default: var(--mtds-color-neutral-background-default);
|
|
77
|
+
--color-neutral-background-tinted: var(--mtds-color-neutral-background-tinted);
|
|
78
|
+
--color-neutral-base-active: var(--mtds-color-neutral-base-active);
|
|
79
|
+
--color-neutral-base-contrast-default: var(--mtds-color-neutral-base-contrast-default);
|
|
80
|
+
--color-neutral-base-contrast-subtle: var(--mtds-color-neutral-base-contrast-subtle);
|
|
81
|
+
--color-neutral-base-default: var(--mtds-color-neutral-base-default);
|
|
82
|
+
--color-neutral-base-hover: var(--mtds-color-neutral-base-hover);
|
|
83
|
+
--color-neutral-border-default: var(--mtds-color-neutral-border-default);
|
|
84
|
+
--color-neutral-border-strong: var(--mtds-color-neutral-border-strong);
|
|
85
|
+
--color-neutral-border-subtle: var(--mtds-color-neutral-border-subtle);
|
|
86
|
+
--color-neutral-surface-active: var(--mtds-color-neutral-surface-active);
|
|
87
|
+
--color-neutral-surface-default: var(--mtds-color-neutral-surface-default);
|
|
88
|
+
--color-neutral-surface-hover: var(--mtds-color-neutral-surface-hover);
|
|
89
|
+
--color-neutral-surface-tinted: var(--mtds-color-neutral-surface-tinted);
|
|
90
|
+
--color-neutral-text-default: var(--mtds-color-neutral-text-default);
|
|
91
|
+
--color-neutral-text-subtle: var(--mtds-color-neutral-text-subtle);
|
|
92
|
+
--color-success-background-default: var(--mtds-color-success-background-default);
|
|
93
|
+
--color-success-background-tinted: var(--mtds-color-success-background-tinted);
|
|
94
|
+
--color-success-base-active: var(--mtds-color-success-base-active);
|
|
95
|
+
--color-success-base-contrast-default: var(--mtds-color-success-base-contrast-default);
|
|
96
|
+
--color-success-base-contrast-subtle: var(--mtds-color-success-base-contrast-subtle);
|
|
97
|
+
--color-success-base-default: var(--mtds-color-success-base-default);
|
|
98
|
+
--color-success-base-hover: var(--mtds-color-success-base-hover);
|
|
99
|
+
--color-success-border-default: var(--mtds-color-success-border-default);
|
|
100
|
+
--color-success-border-strong: var(--mtds-color-success-border-strong);
|
|
101
|
+
--color-success-border-subtle: var(--mtds-color-success-border-subtle);
|
|
102
|
+
--color-success-surface-active: var(--mtds-color-success-surface-active);
|
|
103
|
+
--color-success-surface-default: var(--mtds-color-success-surface-default);
|
|
104
|
+
--color-success-surface-hover: var(--mtds-color-success-surface-hover);
|
|
105
|
+
--color-success-surface-tinted: var(--mtds-color-success-surface-tinted);
|
|
106
|
+
--color-success-text-default: var(--mtds-color-success-text-default);
|
|
107
|
+
--color-success-text-subtle: var(--mtds-color-success-text-subtle);
|
|
108
|
+
--color-surface-active: var(--mtds-color-surface-active);
|
|
109
|
+
--color-surface-default: var(--mtds-color-surface-default);
|
|
110
|
+
--color-surface-hover: var(--mtds-color-surface-hover);
|
|
111
|
+
--color-surface-tinted: var(--mtds-color-surface-tinted);
|
|
112
|
+
--color-text-default: var(--mtds-color-text-default);
|
|
113
|
+
--color-text-subtle: var(--mtds-color-text-subtle);
|
|
114
|
+
--color-warning-background-default: var(--mtds-color-warning-background-default);
|
|
115
|
+
--color-warning-background-tinted: var(--mtds-color-warning-background-tinted);
|
|
116
|
+
--color-warning-base-active: var(--mtds-color-warning-base-active);
|
|
117
|
+
--color-warning-base-contrast-default: var(--mtds-color-warning-base-contrast-default);
|
|
118
|
+
--color-warning-base-contrast-subtle: var(--mtds-color-warning-base-contrast-subtle);
|
|
119
|
+
--color-warning-base-default: var(--mtds-color-warning-base-default);
|
|
120
|
+
--color-warning-base-hover: var(--mtds-color-warning-base-hover);
|
|
121
|
+
--color-warning-border-default: var(--mtds-color-warning-border-default);
|
|
122
|
+
--color-warning-border-strong: var(--mtds-color-warning-border-strong);
|
|
123
|
+
--color-warning-border-subtle: var(--mtds-color-warning-border-subtle);
|
|
124
|
+
--color-warning-surface-active: var(--mtds-color-warning-surface-active);
|
|
125
|
+
--color-warning-surface-default: var(--mtds-color-warning-surface-default);
|
|
126
|
+
--color-warning-surface-hover: var(--mtds-color-warning-surface-hover);
|
|
127
|
+
--color-warning-surface-tinted: var(--mtds-color-warning-surface-tinted);
|
|
128
|
+
--color-warning-text-default: var(--mtds-color-warning-text-default);
|
|
129
|
+
--color-warning-text-subtle: var(--mtds-color-warning-text-subtle);
|
|
130
|
+
--font-weight-bold: var(--mtds-font-weight-bold);
|
|
131
|
+
--font-weight-medium: var(--mtds-font-weight-medium);
|
|
132
|
+
--font-weight-regular: var(--mtds-font-weight-regular);
|
|
133
|
+
--font-weight-semibold: var(--mtds-font-weight-semibold);
|
|
134
|
+
}
|
package/mtds/tokens.d.ts
ADDED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import w from "../styles.module.css.js";
|
|
2
2
|
import { IS_BROWSER as O, attr as l, on as a, QUICK_EVENT as c, anchorPosition as p } from "../utils.js";
|
|
3
3
|
const S = w._tooltip.split(" "), r = "aria-describedby", E = "Escape", d = "aria-labelledby", _ = "--mtds-tooltip-position", y = 300, u = "mtds-tooltip";
|
|
4
|
-
let e = null,
|
|
4
|
+
let e = null, f = Number.NEGATIVE_INFINITY, b = 0, o = null;
|
|
5
5
|
function m({ target: n, type: t, key: i }) {
|
|
6
6
|
if (t === "keydown" && i !== E) return;
|
|
7
|
-
const s =
|
|
7
|
+
const s = f + y - Date.now();
|
|
8
8
|
clearTimeout(b), b = setTimeout(
|
|
9
9
|
P,
|
|
10
10
|
Math.max(s, 0),
|
|
@@ -13,13 +13,13 @@ function m({ target: n, type: t, key: i }) {
|
|
|
13
13
|
}
|
|
14
14
|
function P(n) {
|
|
15
15
|
var T;
|
|
16
|
-
if (
|
|
16
|
+
if (f = Date.now(), !o || n === o) return;
|
|
17
17
|
let t = ((T = n == null ? void 0 : n.closest) == null ? void 0 : T.call(n, "[data-tooltip]")) || null;
|
|
18
18
|
if (t === e) return;
|
|
19
19
|
const i = t && l(t, "data-tooltip") || "", s = t && l(t, "data-tooltip-position") || window.getComputedStyle(t || document.body).getPropertyValue(_) || "top";
|
|
20
20
|
(!i || i === "false" || i === "true" || s === "none") && (t = null), t && (o.textContent = i);
|
|
21
|
-
const
|
|
22
|
-
e == null || e.removeAttribute(
|
|
21
|
+
const L = e && l(e, d) === u, I = !!(t != null && t.innerText.trim()) || (t == null ? void 0 : t.hasAttribute(d)) || (t == null ? void 0 : t.hasAttribute("aria-label"));
|
|
22
|
+
e == null || e.removeAttribute(L ? d : r), p(o, !1), e = t, e && l(e, I ? r : d, u), o.togglePopover(!!t), p(o, t || !1, s);
|
|
23
23
|
}
|
|
24
24
|
O && !document.getElementById(u) && (o = document.body.appendChild(document.createElement("div")), o.classList.add(...S), o.id = u, l(o, "popover", "manual"), a(document, "blur,focus,mouseout,mouseover", m, c), a(window, "keydown", m, c), a(window, "blur", m, c));
|
|
25
25
|
//# sourceMappingURL=tooltip-observer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip-observer.js","sources":["../../designsystem/tooltip/tooltip-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { IS_BROWSER, QUICK_EVENT, anchorPosition, attr, on } from \"../utils\";\n\nconst CSS_TOOLTIP = styles._tooltip.split(\" \");\nconst DESCRIBEDBY = \"aria-describedby\";\nconst ESC = \"Escape\";\nconst LABELLEDBY = \"aria-labelledby\";\nconst POSITION_CSS_PROPERTY = \"--mtds-tooltip-position\";\nconst THROTTLE_DELAY = 300;\nconst TOOLTIP_ID = \"mtds-tooltip\";\n\nlet ANCHOR: HTMLElement | null = null;\nlet LAST_CALL = Number.NEGATIVE_INFINITY;\nlet THROTTLE: number | ReturnType<typeof setTimeout> = 0;\nlet TOOLTIP: HTMLElement | null = null;\n\nfunction handleMove({ target, type, key }: Event & { key?: string }) {\n if (type === \"keydown\" && key !== ESC) return; // Allow ESC dismiss to follow https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n const wait = LAST_CALL + THROTTLE_DELAY - Date.now();\n clearTimeout(THROTTLE);\n THROTTLE = setTimeout(\n handleMoveThrottled,\n Math.max(wait, 0),\n key === ESC ? null : target\n );\n}\n\n// Using a throttled function to avoid performance issues\nfunction handleMoveThrottled(target: Element | null) {\n LAST_CALL = Date.now();\n\n if (!TOOLTIP || target === TOOLTIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n let anchor = target?.closest?.<HTMLElement>(\"[data-tooltip]\") || null;\n\n // No need to update\n if (anchor === ANCHOR) return;\n\n const content = (anchor && attr(anchor, \"data-tooltip\")) || \"\";\n const position =\n (anchor && attr(anchor, \"data-tooltip-position\")) ||\n window\n .getComputedStyle(anchor || document.body)\n .getPropertyValue(POSITION_CSS_PROPERTY) ||\n \"top\";\n\n const isHidden =\n !content ||\n content === \"false\" ||\n content === \"true\" ||\n position === \"none\";\n\n if (isHidden) anchor = null; // Do not show tooltip if boolish value\n if (anchor) TOOLTIP.textContent = content; // Only update content if new anchor\n\n const hadLabel = ANCHOR && attr(ANCHOR, LABELLEDBY) === TOOLTIP_ID;\n const hasLabel =\n Boolean(anchor?.innerText.trim()) ||\n anchor?.hasAttribute(LABELLEDBY) ||\n anchor?.hasAttribute(\"aria-label\");\n\n ANCHOR?.removeAttribute(hadLabel ? LABELLEDBY : DESCRIBEDBY); // Unlink previous anchor\n anchorPosition(TOOLTIP, false); // Reset anchor position\n\n ANCHOR = anchor; // Store new anchor - might be null if no new anchor\n if (ANCHOR) attr(ANCHOR, hasLabel ? DESCRIBEDBY : LABELLEDBY, TOOLTIP_ID); // Use tooltip as description if allready has label\n TOOLTIP.togglePopover(!!anchor);\n anchorPosition(TOOLTIP, anchor, position);\n}\n\n// Initialize if in browser and not already initialized\nif (IS_BROWSER && !document.getElementById(TOOLTIP_ID)) {\n TOOLTIP = document.body.appendChild(document.createElement(\"div\"));\n TOOLTIP.classList.add(...CSS_TOOLTIP);\n TOOLTIP.id = TOOLTIP_ID;\n attr(TOOLTIP, \"popover\", \"manual\");\n on(document, \"blur,focus,mouseout,mouseover\", handleMove, QUICK_EVENT);\n on(window, \"keydown\", handleMove, QUICK_EVENT);\n on(window, \"blur\", handleMove, QUICK_EVENT);\n}\n"],"names":["CSS_TOOLTIP","styles","DESCRIBEDBY","ESC","LABELLEDBY","POSITION_CSS_PROPERTY","THROTTLE_DELAY","TOOLTIP_ID","ANCHOR","LAST_CALL","THROTTLE","TOOLTIP","handleMove","target","type","key","wait","handleMoveThrottled","anchor","_a","content","attr","position","hadLabel","hasLabel","anchorPosition","IS_BROWSER","on","QUICK_EVENT"],"mappings":";;AAGA,MAAMA,IAAcC,EAAO,SAAS,MAAM,GAAG,GACvCC,IAAc,oBACdC,IAAM,UACNC,IAAa,mBACbC,IAAwB,2BACxBC,IAAiB,KACjBC,IAAa;AAEnB,IAAIC,IAA6B,MAC7BC,IAAY,OAAO,mBACnBC,IAAmD,GACnDC,IAA8B;AAElC,SAASC,EAAW,EAAE,QAAAC,GAAQ,MAAAC,GAAM,KAAAC,KAAiC;AAC/D,MAAAD,MAAS,aAAaC,MAAQZ,EAAK;AACvC,QAAMa,IAAOP,IAAYH,IAAiB,KAAK,IAAI;AACnD,eAAaI,CAAQ,GACVA,IAAA;AAAA,IACTO;AAAA,IACA,KAAK,IAAID,GAAM,CAAC;AAAA,IAChBD,MAAQZ,IAAM,OAAOU;AAAA,EACvB;AACF;AAGA,SAASI,EAAoBJ,GAAwB;;AAG/C,MAFJJ,IAAY,KAAK,IAAI,GAEjB,CAACE,KAAWE,MAAWF,EAAS;AACpC,MAAIO,MAASC,IAAAN,KAAA,gBAAAA,EAAQ,YAAR,gBAAAM,EAAA,KAAAN,GAA+B,sBAAqB;AAGjE,MAAIK,MAAWV,EAAQ;AAEvB,QAAMY,IAAWF,KAAUG,EAAKH,GAAQ,cAAc,KAAM,IACtDI,IACHJ,KAAUG,EAAKH,GAAQ,uBAAuB,KAC/C,OACG,iBAAiBA,KAAU,SAAS,IAAI,EACxC,iBAAiBb,CAAqB,KACzC;AAQF,GALE,CAACe,KACDA,MAAY,WACZA,MAAY,UACZE,MAAa,YAEQJ,IAAA,OACnBA,QAAgB,cAAcE;AAElC,QAAMG,IAAWf,KAAUa,EAAKb,GAAQJ,CAAU,MAAMG,GAClDiB,IACJ,GAAQN,KAAA,QAAAA,EAAQ,UAAU,YAC1BA,KAAA,gBAAAA,EAAQ,aAAad,QACrBc,KAAA,gBAAAA,EAAQ,aAAa;AAEf,EAAAV,KAAA,QAAAA,EAAA,gBAAgBe,IAAWnB,IAAaF,IAChDuB,EAAed,GAAS,EAAK,GAEpBH,IAAAU,GACLV,KAAaa,EAAAb,GAAQgB,IAAWtB,IAAcE,GAAYG,CAAU,GAChEI,EAAA,cAAc,CAAC,CAACO,CAAM,GACfO,EAAAd,GAASO,
|
|
1
|
+
{"version":3,"file":"tooltip-observer.js","sources":["../../designsystem/tooltip/tooltip-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { IS_BROWSER, QUICK_EVENT, anchorPosition, attr, on } from \"../utils\";\n\nconst CSS_TOOLTIP = styles._tooltip.split(\" \");\nconst DESCRIBEDBY = \"aria-describedby\";\nconst ESC = \"Escape\";\nconst LABELLEDBY = \"aria-labelledby\";\nconst POSITION_CSS_PROPERTY = \"--mtds-tooltip-position\";\nconst THROTTLE_DELAY = 300;\nconst TOOLTIP_ID = \"mtds-tooltip\";\n\nlet ANCHOR: HTMLElement | null = null;\nlet LAST_CALL = Number.NEGATIVE_INFINITY;\nlet THROTTLE: number | ReturnType<typeof setTimeout> = 0;\nlet TOOLTIP: HTMLElement | null = null;\n\nfunction handleMove({ target, type, key }: Event & { key?: string }) {\n if (type === \"keydown\" && key !== ESC) return; // Allow ESC dismiss to follow https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n const wait = LAST_CALL + THROTTLE_DELAY - Date.now();\n clearTimeout(THROTTLE);\n THROTTLE = setTimeout(\n handleMoveThrottled,\n Math.max(wait, 0),\n key === ESC ? null : target\n );\n}\n\n// Using a throttled function to avoid performance issues\nfunction handleMoveThrottled(target: Element | null) {\n LAST_CALL = Date.now();\n\n if (!TOOLTIP || target === TOOLTIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n let anchor = target?.closest?.<HTMLElement>(\"[data-tooltip]\") || null;\n\n // No need to update\n if (anchor === ANCHOR) return;\n\n const content = (anchor && attr(anchor, \"data-tooltip\")) || \"\";\n const position =\n (anchor && attr(anchor, \"data-tooltip-position\")) ||\n window\n .getComputedStyle(anchor || document.body)\n .getPropertyValue(POSITION_CSS_PROPERTY) ||\n \"top\";\n\n const isHidden =\n !content ||\n content === \"false\" ||\n content === \"true\" ||\n position === \"none\";\n\n if (isHidden) anchor = null; // Do not show tooltip if boolish value\n if (anchor) TOOLTIP.textContent = content; // Only update content if new anchor\n\n const hadLabel = ANCHOR && attr(ANCHOR, LABELLEDBY) === TOOLTIP_ID;\n const hasLabel =\n Boolean(anchor?.innerText.trim()) ||\n anchor?.hasAttribute(LABELLEDBY) ||\n anchor?.hasAttribute(\"aria-label\");\n\n ANCHOR?.removeAttribute(hadLabel ? LABELLEDBY : DESCRIBEDBY); // Unlink previous anchor\n anchorPosition(TOOLTIP, false); // Reset anchor position\n\n ANCHOR = anchor; // Store new anchor - might be null if no new anchor\n if (ANCHOR) attr(ANCHOR, hasLabel ? DESCRIBEDBY : LABELLEDBY, TOOLTIP_ID); // Use tooltip as description if allready has label\n TOOLTIP.togglePopover(!!anchor);\n anchorPosition(TOOLTIP, anchor || false, position);\n}\n\n// Initialize if in browser and not already initialized\nif (IS_BROWSER && !document.getElementById(TOOLTIP_ID)) {\n TOOLTIP = document.body.appendChild(document.createElement(\"div\"));\n TOOLTIP.classList.add(...CSS_TOOLTIP);\n TOOLTIP.id = TOOLTIP_ID;\n attr(TOOLTIP, \"popover\", \"manual\");\n on(document, \"blur,focus,mouseout,mouseover\", handleMove, QUICK_EVENT);\n on(window, \"keydown\", handleMove, QUICK_EVENT);\n on(window, \"blur\", handleMove, QUICK_EVENT);\n}\n"],"names":["CSS_TOOLTIP","styles","DESCRIBEDBY","ESC","LABELLEDBY","POSITION_CSS_PROPERTY","THROTTLE_DELAY","TOOLTIP_ID","ANCHOR","LAST_CALL","THROTTLE","TOOLTIP","handleMove","target","type","key","wait","handleMoveThrottled","anchor","_a","content","attr","position","hadLabel","hasLabel","anchorPosition","IS_BROWSER","on","QUICK_EVENT"],"mappings":";;AAGA,MAAMA,IAAcC,EAAO,SAAS,MAAM,GAAG,GACvCC,IAAc,oBACdC,IAAM,UACNC,IAAa,mBACbC,IAAwB,2BACxBC,IAAiB,KACjBC,IAAa;AAEnB,IAAIC,IAA6B,MAC7BC,IAAY,OAAO,mBACnBC,IAAmD,GACnDC,IAA8B;AAElC,SAASC,EAAW,EAAE,QAAAC,GAAQ,MAAAC,GAAM,KAAAC,KAAiC;AAC/D,MAAAD,MAAS,aAAaC,MAAQZ,EAAK;AACvC,QAAMa,IAAOP,IAAYH,IAAiB,KAAK,IAAI;AACnD,eAAaI,CAAQ,GACVA,IAAA;AAAA,IACTO;AAAA,IACA,KAAK,IAAID,GAAM,CAAC;AAAA,IAChBD,MAAQZ,IAAM,OAAOU;AAAA,EACvB;AACF;AAGA,SAASI,EAAoBJ,GAAwB;;AAG/C,MAFJJ,IAAY,KAAK,IAAI,GAEjB,CAACE,KAAWE,MAAWF,EAAS;AACpC,MAAIO,MAASC,IAAAN,KAAA,gBAAAA,EAAQ,YAAR,gBAAAM,EAAA,KAAAN,GAA+B,sBAAqB;AAGjE,MAAIK,MAAWV,EAAQ;AAEvB,QAAMY,IAAWF,KAAUG,EAAKH,GAAQ,cAAc,KAAM,IACtDI,IACHJ,KAAUG,EAAKH,GAAQ,uBAAuB,KAC/C,OACG,iBAAiBA,KAAU,SAAS,IAAI,EACxC,iBAAiBb,CAAqB,KACzC;AAQF,GALE,CAACe,KACDA,MAAY,WACZA,MAAY,UACZE,MAAa,YAEQJ,IAAA,OACnBA,QAAgB,cAAcE;AAElC,QAAMG,IAAWf,KAAUa,EAAKb,GAAQJ,CAAU,MAAMG,GAClDiB,IACJ,GAAQN,KAAA,QAAAA,EAAQ,UAAU,YAC1BA,KAAA,gBAAAA,EAAQ,aAAad,QACrBc,KAAA,gBAAAA,EAAQ,aAAa;AAEf,EAAAV,KAAA,QAAAA,EAAA,gBAAgBe,IAAWnB,IAAaF,IAChDuB,EAAed,GAAS,EAAK,GAEpBH,IAAAU,GACLV,KAAaa,EAAAb,GAAQgB,IAAWtB,IAAcE,GAAYG,CAAU,GAChEI,EAAA,cAAc,CAAC,CAACO,CAAM,GACfO,EAAAd,GAASO,KAAU,IAAOI,CAAQ;AACnD;AAGII,KAAc,CAAC,SAAS,eAAenB,CAAU,MACnDI,IAAU,SAAS,KAAK,YAAY,SAAS,cAAc,KAAK,CAAC,GACzDA,EAAA,UAAU,IAAI,GAAGX,CAAW,GACpCW,EAAQ,KAAKJ,GACRc,EAAAV,GAAS,WAAW,QAAQ,GAC9BgB,EAAA,UAAU,iCAAiCf,GAAYgB,CAAW,GAClED,EAAA,QAAQ,WAAWf,GAAYgB,CAAW,GAC1CD,EAAA,QAAQ,QAAQf,GAAYgB,CAAW;"}
|
|
@@ -7,7 +7,7 @@ declare const meta: {
|
|
|
7
7
|
};
|
|
8
8
|
export default meta;
|
|
9
9
|
type Story = StoryObj<typeof meta>;
|
|
10
|
-
export declare const
|
|
10
|
+
export declare const HeadingStory: Story;
|
|
11
11
|
export declare const Sizes: Story;
|
|
12
12
|
export declare const React: Story;
|
|
13
13
|
export declare const Center: Story;
|
package/mtds/utils.d.ts
CHANGED
|
@@ -26,7 +26,7 @@ export declare const on: (element: Node | Window, ...rest: Parameters<typeof Ele
|
|
|
26
26
|
* @param listener An event listener function or listener object
|
|
27
27
|
*/
|
|
28
28
|
export declare const off: (element: Node | Window, ...rest: Parameters<typeof Element.prototype.removeEventListener>) => void;
|
|
29
|
-
export declare function anchorPosition(target: HTMLElement, anchor: HTMLElement |
|
|
29
|
+
export declare function anchorPosition(target: HTMLElement, anchor: HTMLElement | false, position?: string | number): boolean | void;
|
|
30
30
|
/**
|
|
31
31
|
* Speed up MutationObserver by debouncing and only running when page is visible
|
|
32
32
|
* @return new MutaionObserver
|
package/mtds/utils.js
CHANGED
|
@@ -18,7 +18,7 @@ w && B(window, "load,resize,scroll", () => {
|
|
|
18
18
|
const d = { top: 0, right: 1, bottom: 2, left: 3 };
|
|
19
19
|
function _(t, e, o) {
|
|
20
20
|
var p;
|
|
21
|
-
if (
|
|
21
|
+
if (e === !1 || !e.isConnected || !t.isConnected) return a.delete(t);
|
|
22
22
|
if (s != null && s.isConnected || document.body.append(s || ""), !a.has(t)) {
|
|
23
23
|
const I = d[o] ?? d.bottom;
|
|
24
24
|
return (p = a.set(t, () => _(t, e, I)).get(t)) == null ? void 0 : p();
|
package/mtds/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../designsystem/utils.ts"],"sourcesContent":["export const IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';\nexport const QUICK_EVENT = { capture: true, passive: true };\n\n/**\n * attr\n * @description Utility to quickly get, set and remove attributes\n * @param el The Element to use as EventTarget\n * @param name The attribute name to get, set or remove, or a object to set multiple attributes\n * @param value A valid attribute value or null to remove attribute\n */\nexport function attr(\n\tel: Element,\n\tname: string,\n\tvalue?: string | null,\n): string | null {\n\tif (value === undefined) return el.getAttribute(name) ?? null; // Fallback to null only if el is undefined\n\tif (value === null) el.removeAttribute(name);\n\telse if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n\treturn null;\n}\n\n/**\n * useId\n * @return A generated unique ID\n */\nlet id = 0;\nconst UUID = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;\nexport function useId (el: Element) {\n if (!el.id) el.id = `${UUID}${++id}`;\n\treturn el.id;\n};\n\n// Internal helper for on / off\nconst events = (\n\taction: \"add\" | \"remove\",\n\telement: Node | Window,\n\trest: Parameters<typeof Element.prototype.addEventListener>,\n): void => {\n\tfor (const type of rest[0].split(\",\")) {\n\t\trest[0] = type;\n\t\telement[`${action}EventListener`](...rest);\n\t}\n};\n\n/**\n * on\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.addEventListener>\n): void => events(\"add\", element, rest);\n\n/**\n * off\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => events(\"remove\", element, rest);\n\n\nconst TARGETS = new Map<Element, () => void>(); // Store current open poppers and their update functions\nconst SCROLLER = IS_BROWSER ? document.createElement('div') : null // Used to ensure we have scrollability under\nif (SCROLLER) attr(SCROLLER, 'style', 'position:absolute;padding:1px;top:0;left:0px');\n\nif (IS_BROWSER){\n\ton(window, 'load,resize,scroll', () => {\n\t\tfor (const [_, update] of TARGETS) update();\n\t}, QUICK_EVENT);}\n\t\n/**\n * anchorPosition\n * @param target The Element to position\n * @param anchor The Element to use as anchor\n */\nconst POSITION = { top: 0, right: 1, bottom: 2, left: 3 }; // Speed up by using a const map\n\nexport function anchorPosition (target: HTMLElement, anchor: HTMLElement | null | false, position?: string | number) {\n\tif (!anchor || !anchor.isConnected || !target.isConnected) return TARGETS.delete(target); // Stop watchning if anchor is removed from DOM\n\tif (!SCROLLER?.isConnected) document.body.append(SCROLLER || ''); // Ensure we have t´he scroller\n\tif (!TARGETS.has(target)) { // Setup new target or update position\n\t\tconst place = POSITION[position as keyof typeof POSITION] ?? POSITION.bottom; // Use CSS property to store position for more flexibility\n\t\treturn TARGETS.set(target, () => anchorPosition(target, anchor, place)).get(target)?.(); // Start watching if not already watching\n\t}\n\n const { offsetWidth: targetW, offsetHeight: targetH } = target;\n const { offsetWidth: anchorW, offsetHeight: anchorH } = anchor;\n const { width, height, left, top } = anchor.getBoundingClientRect();\n\tconst anchorX = Math.round(left - (anchorW - width) / 2); // Correct for CSS transform scale\n const anchorY = Math.round(top - (anchorH - height) / 2); // Correct for CSS transform scale\n\n\tconst hasSpaceLeft = anchorX - targetW > 0\n\tconst hasSpaceRight = anchorW + anchorW + targetW < window.innerWidth;\n\tconst hasSpaceOver = anchorY - targetH > 0\n\tconst hasSpaceUnder = anchorY + anchorH + targetH < window.innerHeight;\n\tconst positionRight = (position === POSITION.bottom && hasSpaceRight) || !hasSpaceLeft // Always position right when no hasSpaceLeft, as no OS scrolls further up than 0\n\tconst positionUnder = (position === POSITION.bottom && hasSpaceUnder) || !hasSpaceOver // Always position under when no hasSpaceOver, as no OS scrolls further up than 0\n\tconst centerX = Math.min(Math.max(10, anchorX - (targetW - anchorW) / 2), window.innerWidth - targetW - 10);\n\tconst centerY = Math.min(Math.max(10, anchorY - (targetH - anchorH) / 2), window.innerHeight - targetH - 10);\n\tconst isVertical = position === POSITION.top || position === POSITION.bottom;\n\n\ttarget.style.left = `${Math.round(isVertical ? centerX : (positionRight ? anchorX + anchorW : anchorX - targetW))}px`\n target.style.top = `${Math.round(isVertical ? (positionUnder ? anchorY + anchorH : anchorY - targetH) : centerY)}px`\n SCROLLER?.style.setProperty('translate', `${Math.round(window.scrollX + anchorX + anchorW + targetW + 30)} ${Math.round(window.scrollY + anchorY + anchorH + targetH + 30)}px`);\n}\n\n/**\n * Speed up MutationObserver by debouncing and only running when page is visible\n * @return new MutaionObserver\n */\nexport function createOptimizedMutationObserver(callback: MutationCallback) {\n let queue = 0;\n\n\tconst onFrame = () => setTimeout(onTimer, 200); // Use both requestAnimationFrame and setTimeout to debounce and only run when visible\n\tconst onTimer = () => {\n\t\tcallback([], observer);\n\t\tqueue = 0;\n\t};\n const observer = new MutationObserver(() => {\n if (!queue) queue = requestAnimationFrame(onFrame);\n });\n\n return observer;\n}\n\ntype Mutator = { observer: MutationObserver, collections: Map<string, () => void> };\nconst MUTATORS = new WeakMap<Element, Mutator>();\nconst MUTATORS_CALLBACK = (element: Element) => {\n\tconst mutator = MUTATORS.get(element);\n\n\tif (!mutator || !element.isConnected) {\n\t\tmutator?.observer?.disconnect();\n\t\tMUTATORS.delete(element);\n\t} else for(const [, callback] of mutator.collections) callback();\n};\n\n/**\n * onMutation\n * @description Utility to quickly observe mutations on a specific class name\n * @param element The Element to use as EventTarget\n * @param className The class name to observe\n * @param callback The callback to run when mutations are detected or false to stop observing\n */\nexport const onMutation = (\n\telement: Element,\n\tclassName: string,\n\tcallback: ((collection: HTMLCollection) => void) | false\n) => {\n\tconst collection = element.getElementsByClassName(className);\n\tlet mutator = MUTATORS.get(element);\n\n\tif (!mutator) {\n\t\tmutator = { collections: new Map(), observer: createOptimizedMutationObserver(() => MUTATORS_CALLBACK(element)) };\n\t\tmutator.observer.observe(element, { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] });\n\t\tMUTATORS.set(element, mutator);\n\t}\n\tif (callback) mutator.collections.set(className, () => callback(collection));\n\telse mutator.collections.delete(className);\n}\n\nexport const isInputLike = (el: unknown): el is HTMLInputElement =>\n\tel instanceof HTMLElement && 'validity' in el && !(el instanceof HTMLButtonElement);\n\n// Make React support popover attributes\n// https://github.com/facebook/react/issues/27479\ntype Popover = \"\" | \"auto\" | \"manual\" | undefined;\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicAttributes {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: Popover;\n\t\t}\n\t}\n\tnamespace React {\n\t\tinterface HTMLAttributes<T> {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: Popover;\n\t\t}\n\t}\n}"],"names":["IS_BROWSER","QUICK_EVENT","attr","el","name","value","id","UUID","useId","events","action","element","rest","type","on","off","TARGETS","SCROLLER","_","update","POSITION","anchorPosition","target","anchor","position","_a","place","targetW","targetH","anchorW","anchorH","width","height","left","top","anchorX","anchorY","hasSpaceLeft","hasSpaceRight","hasSpaceOver","hasSpaceUnder","positionRight","positionUnder","centerX","centerY","isVertical","createOptimizedMutationObserver","callback","queue","onFrame","onTimer","observer","MUTATORS","MUTATORS_CALLBACK","mutator","onMutation","className","collection","isInputLike"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../designsystem/utils.ts"],"sourcesContent":["export const IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';\nexport const QUICK_EVENT = { capture: true, passive: true };\n\n/**\n * attr\n * @description Utility to quickly get, set and remove attributes\n * @param el The Element to use as EventTarget\n * @param name The attribute name to get, set or remove, or a object to set multiple attributes\n * @param value A valid attribute value or null to remove attribute\n */\nexport function attr(\n\tel: Element,\n\tname: string,\n\tvalue?: string | null,\n): string | null {\n\tif (value === undefined) return el.getAttribute(name) ?? null; // Fallback to null only if el is undefined\n\tif (value === null) el.removeAttribute(name);\n\telse if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n\treturn null;\n}\n\n/**\n * useId\n * @return A generated unique ID\n */\nlet id = 0;\nconst UUID = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;\nexport function useId (el: Element) {\n if (!el.id) el.id = `${UUID}${++id}`;\n\treturn el.id;\n};\n\n// Internal helper for on / off\nconst events = (\n\taction: \"add\" | \"remove\",\n\telement: Node | Window,\n\trest: Parameters<typeof Element.prototype.addEventListener>,\n): void => {\n\tfor (const type of rest[0].split(\",\")) {\n\t\trest[0] = type;\n\t\telement[`${action}EventListener`](...rest);\n\t}\n};\n\n/**\n * on\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.addEventListener>\n): void => events(\"add\", element, rest);\n\n/**\n * off\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => events(\"remove\", element, rest);\n\n\nconst TARGETS = new Map<Element, () => void>(); // Store current open poppers and their update functions\nconst SCROLLER = IS_BROWSER ? document.createElement('div') : null // Used to ensure we have scrollability under\nif (SCROLLER) attr(SCROLLER, 'style', 'position:absolute;padding:1px;top:0;left:0px');\n\nif (IS_BROWSER){\n\ton(window, 'load,resize,scroll', () => {\n\t\tfor (const [_, update] of TARGETS) update();\n\t}, QUICK_EVENT);}\n\t\n/**\n * anchorPosition\n * @param target The Element to position\n * @param anchor The Element to use as anchor\n */\nconst POSITION = { top: 0, right: 1, bottom: 2, left: 3 }; // Speed up by using a const map\n\nexport function anchorPosition (target: HTMLElement, anchor: HTMLElement | false, position?: string | number) {\n\tif (anchor === false || !anchor.isConnected || !target.isConnected) return TARGETS.delete(target); // Stop watching if anchor is removed from DOM\n\tif (!SCROLLER?.isConnected) document.body.append(SCROLLER || ''); // Ensure we have t´he scroller\n\tif (!TARGETS.has(target)) { // Setup new target or update position\n\t\tconst place = POSITION[position as keyof typeof POSITION] ?? POSITION.bottom; // Use CSS property to store position for more flexibility\n\t\treturn TARGETS.set(target, () => anchorPosition(target, anchor, place)).get(target)?.(); // Start watching if not already watching\n\t}\n\n const { offsetWidth: targetW, offsetHeight: targetH } = target;\n const { offsetWidth: anchorW, offsetHeight: anchorH } = anchor;\n const { width, height, left, top } = anchor.getBoundingClientRect();\n\tconst anchorX = Math.round(left - (anchorW - width) / 2); // Correct for CSS transform scale\n const anchorY = Math.round(top - (anchorH - height) / 2); // Correct for CSS transform scale\n\n\tconst hasSpaceLeft = anchorX - targetW > 0\n\tconst hasSpaceRight = anchorW + anchorW + targetW < window.innerWidth;\n\tconst hasSpaceOver = anchorY - targetH > 0\n\tconst hasSpaceUnder = anchorY + anchorH + targetH < window.innerHeight;\n\tconst positionRight = (position === POSITION.bottom && hasSpaceRight) || !hasSpaceLeft // Always position right when no hasSpaceLeft, as no OS scrolls further up than 0\n\tconst positionUnder = (position === POSITION.bottom && hasSpaceUnder) || !hasSpaceOver // Always position under when no hasSpaceOver, as no OS scrolls further up than 0\n\tconst centerX = Math.min(Math.max(10, anchorX - (targetW - anchorW) / 2), window.innerWidth - targetW - 10);\n\tconst centerY = Math.min(Math.max(10, anchorY - (targetH - anchorH) / 2), window.innerHeight - targetH - 10);\n\tconst isVertical = position === POSITION.top || position === POSITION.bottom;\n\n\ttarget.style.left = `${Math.round(isVertical ? centerX : (positionRight ? anchorX + anchorW : anchorX - targetW))}px`\n target.style.top = `${Math.round(isVertical ? (positionUnder ? anchorY + anchorH : anchorY - targetH) : centerY)}px`\n SCROLLER?.style.setProperty('translate', `${Math.round(window.scrollX + anchorX + anchorW + targetW + 30)} ${Math.round(window.scrollY + anchorY + anchorH + targetH + 30)}px`);\n}\n\n/**\n * Speed up MutationObserver by debouncing and only running when page is visible\n * @return new MutaionObserver\n */\nexport function createOptimizedMutationObserver(callback: MutationCallback) {\n let queue = 0;\n\n\tconst onFrame = () => setTimeout(onTimer, 200); // Use both requestAnimationFrame and setTimeout to debounce and only run when visible\n\tconst onTimer = () => {\n\t\tcallback([], observer);\n\t\tqueue = 0;\n\t};\n const observer = new MutationObserver(() => {\n if (!queue) queue = requestAnimationFrame(onFrame);\n });\n\n return observer;\n}\n\ntype Mutator = { observer: MutationObserver, collections: Map<string, () => void> };\nconst MUTATORS = new WeakMap<Element, Mutator>();\nconst MUTATORS_CALLBACK = (element: Element) => {\n\tconst mutator = MUTATORS.get(element);\n\n\tif (!mutator || !element.isConnected) {\n\t\tmutator?.observer?.disconnect();\n\t\tMUTATORS.delete(element);\n\t} else for(const [, callback] of mutator.collections) callback();\n};\n\n/**\n * onMutation\n * @description Utility to quickly observe mutations on a specific class name\n * @param element The Element to use as EventTarget\n * @param className The class name to observe\n * @param callback The callback to run when mutations are detected or false to stop observing\n */\nexport const onMutation = (\n\telement: Element,\n\tclassName: string,\n\tcallback: ((collection: HTMLCollection) => void) | false\n) => {\n\tconst collection = element.getElementsByClassName(className);\n\tlet mutator = MUTATORS.get(element);\n\n\tif (!mutator) {\n\t\tmutator = { collections: new Map(), observer: createOptimizedMutationObserver(() => MUTATORS_CALLBACK(element)) };\n\t\tmutator.observer.observe(element, { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] });\n\t\tMUTATORS.set(element, mutator);\n\t}\n\tif (callback) mutator.collections.set(className, () => callback(collection));\n\telse mutator.collections.delete(className);\n}\n\nexport const isInputLike = (el: unknown): el is HTMLInputElement =>\n\tel instanceof HTMLElement && 'validity' in el && !(el instanceof HTMLButtonElement);\n\n// Make React support popover attributes\n// https://github.com/facebook/react/issues/27479\ntype Popover = \"\" | \"auto\" | \"manual\" | undefined;\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicAttributes {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: Popover;\n\t\t}\n\t}\n\tnamespace React {\n\t\tinterface HTMLAttributes<T> {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: Popover;\n\t\t}\n\t}\n}"],"names":["IS_BROWSER","QUICK_EVENT","attr","el","name","value","id","UUID","useId","events","action","element","rest","type","on","off","TARGETS","SCROLLER","_","update","POSITION","anchorPosition","target","anchor","position","_a","place","targetW","targetH","anchorW","anchorH","width","height","left","top","anchorX","anchorY","hasSpaceLeft","hasSpaceRight","hasSpaceOver","hasSpaceUnder","positionRight","positionUnder","centerX","centerY","isVertical","createOptimizedMutationObserver","callback","queue","onFrame","onTimer","observer","MUTATORS","MUTATORS_CALLBACK","mutator","onMutation","className","collection","isInputLike"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mattilsynet/design",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./mtds/index.js",
|
|
6
6
|
"types": "./mtds/index.d.ts",
|
|
@@ -26,7 +26,8 @@
|
|
|
26
26
|
"./index.iife.js.map": "./mtds/index.iife.js.map",
|
|
27
27
|
"./package.json": "./package.json",
|
|
28
28
|
"./styles.css": "./mtds/styles.css",
|
|
29
|
-
"./styles.json": "./mtds/styles.json"
|
|
29
|
+
"./styles.json": "./mtds/styles.json",
|
|
30
|
+
"./tailwind.css": "./mtds/tailwind.css"
|
|
30
31
|
},
|
|
31
32
|
"scripts": {
|
|
32
33
|
"build": "vite build --mode iife && vite build && rm -rf mtds/docs/ && rm -rf mtds/iife.css",
|