@entur/menu 5.0.7-beta.0 → 5.0.7

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.
Files changed (2) hide show
  1. package/dist/styles.css +155 -198
  2. package/package.json +11 -11
package/dist/styles.css CHANGED
@@ -1,103 +1,5 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-breadcrumb {
4
- list-style: none;
5
- margin: 0;
6
- padding: 0;
7
- }
8
-
9
- .eds-breadcrumb__item {
10
- display: inline-block;
11
- color: var(--components-menu-breadcrumb-standard-text);
12
- }
13
- .eds-contrast .eds-breadcrumb__item {
14
- color: var(--components-menu-breadcrumb-contrast-text);
15
- }
16
-
17
- .eds-breadcrumb__separator {
18
- margin: 0 0.25rem 0 0.25rem;
19
- }
20
-
21
- .eds-breadcrumb__link {
22
- text-decoration: none;
23
- color: var(--components-menu-breadcrumb-standard-text);
24
- background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-standard-text) 0%, var(--components-menu-breadcrumb-standard-text) 100%);
25
- background-repeat: no-repeat;
26
- background-size: 100% 0.125rem;
27
- background-position: 0 100%;
28
- }
29
- .eds-contrast .eds-breadcrumb__link {
30
- color: var(--components-menu-breadcrumb-contrast-text);
31
- background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-contrast-text) 0%, var(--components-menu-breadcrumb-contrast-text) 100%);
32
- }
33
- .eds-breadcrumb__link:hover {
34
- animation: eds-breadcrumb-underline 0.3s ease-in;
35
- }
36
- .eds-breadcrumb__link:focus {
37
- outline: 2px solid #181c56;
38
- outline-color: var(--basecolors-stroke-focus-standard);
39
- outline-offset: 0.125rem;
40
- }
41
- .eds-contrast .eds-breadcrumb__link:focus {
42
- outline-color: var(--basecolors-stroke-focus-contrast);
43
- }
44
- @keyframes eds-breadcrumb-underline {
45
- from {
46
- background-size: 0% 0.125rem;
47
- }
48
- to {
49
- background-size: 100% 0.125rem;
50
- }
51
- }
52
- .eds-breadcrumb__link--current {
53
- font-weight: 600;
54
- }
55
- /* DO NOT CHANGE!*/
56
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
57
- .eds-overflow-menu__menu-list {
58
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
59
- overflow: hidden;
60
- border-radius: 0.25rem;
61
- border: 0.0625rem solid var(--components-menu-overflowmenu-border);
62
- z-index: 20;
63
- }
64
- .eds-overflow-menu__menu-list.eds-contrast {
65
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
66
- }
67
- .eds-overflow-menu__item {
68
- display: block;
69
- width: 100%;
70
- -webkit-appearance: none;
71
- -moz-appearance: none;
72
- appearance: none;
73
- padding: 0.75rem;
74
- border: none;
75
- outline: none;
76
- font-size: 1rem;
77
- line-height: 1.375rem;
78
- text-align: left;
79
- text-decoration: none;
80
- color: var(--components-menu-overflowmenu-text);
81
- background: var(--components-menu-overflowmenu-fill-default);
82
- cursor: pointer;
83
- }
84
- .eds-overflow-menu__item--highlighted {
85
- background: var(--components-menu-overflowmenu-fill-hover);
86
- }
87
- .eds-overflow-menu__item:active {
88
- background: var(--components-menu-overflowmenu-fill-active);
89
- color: var(--components-menu-overflowmenu-text-active);
90
- }
91
- .eds-overflow-menu__item--disabled {
92
- background: var(--components-menu-overflowmenu-fill-default);
93
- color: var(--components-menu-overflowmenu-text-disabled);
94
- cursor: not-allowed;
95
- }
96
- .eds-overflow-menu__item svg {
97
- margin-right: 0.75rem;
98
- }
99
- /* DO NOT CHANGE!*/
100
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
101
3
  .eds-side-navigation,
102
4
  .eds-side-navigation-group {
103
5
  color: var(--components-menu-sidenavigation-standard-text);
@@ -171,19 +73,11 @@
171
73
  .eds-contrast .eds-side-navigation__collapse-button svg {
172
74
  color: var(--components-menu-sidenavigation-contrast-icon);
173
75
  }
174
- .eds-side-navigation__collapse-button.focus-visible {
175
- outline: 2px solid #181c56;
176
- outline-color: var(--basecolors-stroke-focus-standard);
177
- outline-offset: 0.125rem;
178
- }
179
76
  .eds-side-navigation__collapse-button:focus-visible {
180
77
  outline: 2px solid #181c56;
181
78
  outline-color: var(--basecolors-stroke-focus-standard);
182
79
  outline-offset: 0.125rem;
183
80
  }
184
- .eds-contrast .eds-side-navigation__collapse-button.focus-visible {
185
- outline-color: var(--basecolors-stroke-focus-contrast);
186
- }
187
81
  .eds-contrast .eds-side-navigation__collapse-button:focus-visible {
188
82
  outline-color: var(--basecolors-stroke-focus-contrast);
189
83
  }
@@ -235,6 +129,7 @@
235
129
  padding-left: 2.5rem;
236
130
  transition: padding 0.2s ease-in-out;
237
131
  text-align: left;
132
+ -webkit-text-decoration: none;
238
133
  text-decoration: none;
239
134
  width: 100%;
240
135
  }
@@ -265,19 +160,11 @@
265
160
  .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
266
161
  background-color: var(--components-menu-sidenavigation-contrast-fill-hover);
267
162
  }
268
- .eds-side-navigation__click-target:not([disabled]).focus-visible {
269
- outline: 2px solid #181c56;
270
- outline-color: var(--basecolors-stroke-focus-standard);
271
- outline-offset: 0.125rem;
272
- }
273
163
  .eds-side-navigation__click-target:not([disabled]):focus-visible {
274
164
  outline: 2px solid #181c56;
275
165
  outline-color: var(--basecolors-stroke-focus-standard);
276
166
  outline-offset: 0.125rem;
277
167
  }
278
- .eds-contrast .eds-side-navigation__click-target:not([disabled]).focus-visible {
279
- outline-color: var(--basecolors-stroke-focus-contrast);
280
- }
281
168
  .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus-visible {
282
169
  outline-color: var(--basecolors-stroke-focus-contrast);
283
170
  }
@@ -333,21 +220,113 @@
333
220
  .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
334
221
  padding-left: 2rem;
335
222
  }
336
- .eds-side-navigation-group__trigger.focus-visible {
223
+ .eds-side-navigation-group__trigger:focus-visible {
337
224
  outline: 2px solid #181c56;
338
225
  outline-color: var(--basecolors-stroke-focus-standard);
339
226
  outline-offset: 0.125rem;
340
227
  }
341
- .eds-side-navigation-group__trigger:focus-visible {
228
+ .eds-contrast .eds-side-navigation-group__trigger:focus-visible {
229
+ outline-color: var(--basecolors-stroke-focus-contrast);
230
+ }
231
+ /* DO NOT CHANGE!*/
232
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
233
+ .eds-breadcrumb {
234
+ list-style: none;
235
+ margin: 0;
236
+ padding: 0;
237
+ }
238
+
239
+ .eds-breadcrumb__item {
240
+ display: inline-block;
241
+ color: var(--components-menu-breadcrumb-standard-text);
242
+ }
243
+ .eds-contrast .eds-breadcrumb__item {
244
+ color: var(--components-menu-breadcrumb-contrast-text);
245
+ }
246
+
247
+ .eds-breadcrumb__separator {
248
+ margin: 0 0.25rem 0 0.25rem;
249
+ }
250
+
251
+ .eds-breadcrumb__link {
252
+ -webkit-text-decoration: none;
253
+ text-decoration: none;
254
+ color: var(--components-menu-breadcrumb-standard-text);
255
+ background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-standard-text) 0%, var(--components-menu-breadcrumb-standard-text) 100%);
256
+ background-repeat: no-repeat;
257
+ background-size: 100% 0.125rem;
258
+ background-position: 0 100%;
259
+ }
260
+ .eds-contrast .eds-breadcrumb__link {
261
+ color: var(--components-menu-breadcrumb-contrast-text);
262
+ background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-contrast-text) 0%, var(--components-menu-breadcrumb-contrast-text) 100%);
263
+ }
264
+ .eds-breadcrumb__link:hover {
265
+ animation: eds-breadcrumb-underline 0.3s ease-in;
266
+ }
267
+ .eds-breadcrumb__link:focus {
342
268
  outline: 2px solid #181c56;
343
269
  outline-color: var(--basecolors-stroke-focus-standard);
344
270
  outline-offset: 0.125rem;
345
271
  }
346
- .eds-contrast .eds-side-navigation-group__trigger.focus-visible {
272
+ .eds-contrast .eds-breadcrumb__link:focus {
347
273
  outline-color: var(--basecolors-stroke-focus-contrast);
348
274
  }
349
- .eds-contrast .eds-side-navigation-group__trigger:focus-visible {
350
- outline-color: var(--basecolors-stroke-focus-contrast);
275
+ @keyframes eds-breadcrumb-underline {
276
+ from {
277
+ background-size: 0% 0.125rem;
278
+ }
279
+ to {
280
+ background-size: 100% 0.125rem;
281
+ }
282
+ }
283
+ .eds-breadcrumb__link--current {
284
+ font-weight: 600;
285
+ }
286
+ /* DO NOT CHANGE!*/
287
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
288
+ .eds-overflow-menu__menu-list {
289
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
290
+ overflow: hidden;
291
+ border-radius: 0.25rem;
292
+ border: 0.0625rem solid var(--components-menu-overflowmenu-border);
293
+ z-index: 20;
294
+ }
295
+ .eds-overflow-menu__menu-list.eds-contrast {
296
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
297
+ }
298
+ .eds-overflow-menu__item {
299
+ display: block;
300
+ width: 100%;
301
+ -webkit-appearance: none;
302
+ -moz-appearance: none;
303
+ appearance: none;
304
+ padding: 0.75rem;
305
+ border: none;
306
+ outline: none;
307
+ font-size: 1rem;
308
+ line-height: 1.375rem;
309
+ text-align: left;
310
+ -webkit-text-decoration: none;
311
+ text-decoration: none;
312
+ color: var(--components-menu-overflowmenu-text);
313
+ background: var(--components-menu-overflowmenu-fill-default);
314
+ cursor: pointer;
315
+ }
316
+ .eds-overflow-menu__item--highlighted {
317
+ background: var(--components-menu-overflowmenu-fill-hover);
318
+ }
319
+ .eds-overflow-menu__item:active {
320
+ background: var(--components-menu-overflowmenu-fill-active);
321
+ color: var(--components-menu-overflowmenu-text-active);
322
+ }
323
+ .eds-overflow-menu__item--disabled {
324
+ background: var(--components-menu-overflowmenu-fill-default);
325
+ color: var(--components-menu-overflowmenu-text-disabled);
326
+ cursor: not-allowed;
327
+ }
328
+ .eds-overflow-menu__item svg {
329
+ margin-right: 0.75rem;
351
330
  }
352
331
  /* DO NOT CHANGE!*/
353
332
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -439,19 +418,11 @@
439
418
  background-color: var(--components-menu-pagination-contrast-hover);
440
419
  border-color: var(--components-menu-pagination-contrast-border-unselected);
441
420
  }
442
- .eds-pagination__controls__page.focus-visible {
443
- outline: 2px solid #181c56;
444
- outline-color: var(--basecolors-stroke-focus-standard);
445
- outline-offset: 0.125rem;
446
- }
447
421
  .eds-pagination__controls__page:focus-visible {
448
422
  outline: 2px solid #181c56;
449
423
  outline-color: var(--basecolors-stroke-focus-standard);
450
424
  outline-offset: 0.125rem;
451
425
  }
452
- .eds-contrast .eds-pagination__controls__page.focus-visible {
453
- outline-color: var(--basecolors-stroke-focus-contrast);
454
- }
455
426
  .eds-contrast .eds-pagination__controls__page:focus-visible {
456
427
  outline-color: var(--basecolors-stroke-focus-contrast);
457
428
  }
@@ -510,19 +481,11 @@
510
481
  appearance: none;
511
482
  margin: 0;
512
483
  }
513
- .eds-pagination__controls__input__field.focus-visible {
514
- outline: 2px solid #181c56;
515
- outline-color: var(--basecolors-stroke-focus-standard);
516
- outline-offset: 0.125rem;
517
- }
518
484
  .eds-pagination__controls__input__field:focus-visible {
519
485
  outline: 2px solid #181c56;
520
486
  outline-color: var(--basecolors-stroke-focus-standard);
521
487
  outline-offset: 0.125rem;
522
488
  }
523
- .eds-contrast .eds-pagination__controls__input__field.focus-visible {
524
- outline-color: var(--basecolors-stroke-focus-contrast);
525
- }
526
489
  .eds-contrast .eds-pagination__controls__input__field:focus-visible {
527
490
  outline-color: var(--basecolors-stroke-focus-contrast);
528
491
  }
@@ -552,17 +515,10 @@
552
515
  font-family: inherit;
553
516
  text-transform: none;
554
517
  }
555
- .eds-stepper__step.focus-visible .eds-stepper__step__label {
556
- outline-offset: 0.125rem;
557
- outline: 2px solid #181c56;
558
- }
559
518
  .eds-stepper__step:focus-visible .eds-stepper__step__label {
560
519
  outline-offset: 0.125rem;
561
520
  outline: 2px solid #181c56;
562
521
  }
563
- .eds-contrast .eds-stepper__step.focus-visible .eds-stepper__step__label {
564
- outline: 2px solid #ffffff;
565
- }
566
522
  .eds-contrast .eds-stepper__step:focus-visible .eds-stepper__step__label {
567
523
  outline: 2px solid #ffffff;
568
524
  }
@@ -653,6 +609,63 @@
653
609
  }
654
610
  /* DO NOT CHANGE!*/
655
611
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
612
+ .eds-top-navigation-item {
613
+ --show-active-line: 0;
614
+ display: inline-block;
615
+ cursor: pointer;
616
+ color: var(--components-menu-navigationbar-standard-text-unselected);
617
+ -webkit-text-decoration: none;
618
+ text-decoration: none;
619
+ position: relative;
620
+ padding: 1rem;
621
+ min-width: 5rem;
622
+ width: -moz-fit-content;
623
+ width: fit-content;
624
+ text-align: center;
625
+ font-family: inherit;
626
+ font-size: 1rem;
627
+ font-weight: 600;
628
+ }
629
+ .eds-top-navigation-item::after {
630
+ content: "";
631
+ display: block;
632
+ bottom: 1rem;
633
+ height: 0.1875rem;
634
+ width: 0;
635
+ margin: 0 auto;
636
+ opacity: var(--show-active-line);
637
+ background: var(--components-menu-navigationbar-standard-stroke-selected);
638
+ transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
639
+ }
640
+ .eds-contrast .eds-top-navigation-item {
641
+ color: var(--components-menu-navigationbar-contrast-text-unselected);
642
+ }
643
+ .eds-top-navigation-item:focus {
644
+ outline: 2px solid #181c56;
645
+ outline-color: var(--basecolors-stroke-focus-standard);
646
+ outline-offset: 0.125rem;
647
+ }
648
+ .eds-contrast .eds-top-navigation-item:focus {
649
+ outline-color: var(--basecolors-stroke-focus-contrast);
650
+ }
651
+ .eds-top-navigation-item:hover {
652
+ --show-active-line: 1;
653
+ }
654
+ .eds-top-navigation-item:hover::after {
655
+ width: 2rem;
656
+ }
657
+ .eds-top-navigation-item--active {
658
+ color: var(--components-menu-navigationbar-standard-text-selected);
659
+ --show-active-line: 1;
660
+ }
661
+ .eds-top-navigation-item--active::after {
662
+ width: 2rem;
663
+ }
664
+ .eds-contrast .eds-top-navigation-item--active {
665
+ color: var(--components-menu-navigationbar-contrast-text-selected);
666
+ }
667
+ /* DO NOT CHANGE!*/
668
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
656
669
  /* DO NOT CHANGE!*/
657
670
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
658
671
  /* DO NOT CHANGE!*/
@@ -991,59 +1004,3 @@
991
1004
  --eds-menu: 1;
992
1005
  --reach-menu-button: 1;
993
1006
  }
994
- /* DO NOT CHANGE!*/
995
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
996
- .eds-top-navigation-item {
997
- --show-active-line: 0;
998
- display: inline-block;
999
- cursor: pointer;
1000
- color: var(--components-menu-navigationbar-standard-text-unselected);
1001
- text-decoration: none;
1002
- position: relative;
1003
- padding: 1rem;
1004
- min-width: 5rem;
1005
- width: -moz-fit-content;
1006
- width: fit-content;
1007
- text-align: center;
1008
- font-family: inherit;
1009
- font-size: 1rem;
1010
- font-weight: 600;
1011
- }
1012
- .eds-top-navigation-item::after {
1013
- content: "";
1014
- display: block;
1015
- bottom: 1rem;
1016
- height: 0.1875rem;
1017
- width: 0;
1018
- margin: 0 auto;
1019
- opacity: var(--show-active-line);
1020
- background: var(--components-menu-navigationbar-standard-stroke-selected);
1021
- transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
1022
- }
1023
- .eds-contrast .eds-top-navigation-item {
1024
- color: var(--components-menu-navigationbar-contrast-text-unselected);
1025
- }
1026
- .eds-top-navigation-item:focus {
1027
- outline: 2px solid #181c56;
1028
- outline-color: var(--basecolors-stroke-focus-standard);
1029
- outline-offset: 0.125rem;
1030
- }
1031
- .eds-contrast .eds-top-navigation-item:focus {
1032
- outline-color: var(--basecolors-stroke-focus-contrast);
1033
- }
1034
- .eds-top-navigation-item:hover {
1035
- --show-active-line: 1;
1036
- }
1037
- .eds-top-navigation-item:hover::after {
1038
- width: 2rem;
1039
- }
1040
- .eds-top-navigation-item--active {
1041
- color: var(--components-menu-navigationbar-standard-text-selected);
1042
- --show-active-line: 1;
1043
- }
1044
- .eds-top-navigation-item--active::after {
1045
- width: 2rem;
1046
- }
1047
- .eds-contrast .eds-top-navigation-item--active {
1048
- color: var(--components-menu-navigationbar-contrast-text-selected);
1049
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "5.0.7-beta.0",
3
+ "version": "5.0.7",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -27,20 +27,20 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/a11y": "^0.2.94-beta.0",
31
- "@entur/button": "^3.2.37-beta.0",
32
- "@entur/expand": "^3.5.26-beta.0",
33
- "@entur/icons": "^7.5.1-beta.0",
34
- "@entur/layout": "^2.3.21-beta.0",
35
- "@entur/tokens": "^3.17.4-beta.0",
36
- "@entur/tooltip": "^5.1.5-beta.0",
37
- "@entur/typography": "^1.8.50-beta.0",
38
- "@entur/utils": "^0.12.2-beta.0",
30
+ "@entur/a11y": "^0.2.94",
31
+ "@entur/button": "^3.2.37",
32
+ "@entur/expand": "^3.5.26",
33
+ "@entur/icons": "^7.5.1",
34
+ "@entur/layout": "^2.3.21",
35
+ "@entur/tokens": "^3.17.4",
36
+ "@entur/tooltip": "^5.1.5",
37
+ "@entur/typography": "^1.8.50",
38
+ "@entur/utils": "^0.12.2",
39
39
  "@floating-ui/react": "^0.26.23",
40
40
  "classnames": "^2.3.1"
41
41
  },
42
42
  "devDependencies": {
43
43
  "dts-cli": "2.0.5"
44
44
  },
45
- "gitHead": "b213fa4fd10a1a07abada3fa987b7ee2ed110ac2"
45
+ "gitHead": "835e1335b390f48b80379ae6c473ac89041a392a"
46
46
  }