@scania/tegel-lite 0.1.0-side-menu-beta.2 → 0.1.0-side-menu-beta.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.
Files changed (3) hide show
  1. package/dist/components.css +8 -5
  2. package/dist/tl-side-menu.css +8 -5
  3. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -6743,7 +6743,7 @@ body {
6743
6743
  border-right: var(--side-menu-item-border-thickness) solid var(--side-menu-item-border-bottom-color);
6744
6744
  display: flex;
6745
6745
  align-items: center;
6746
- height: var(--side-menu-item-height);
6746
+ height: var(--side-menu-sub-item-height);
6747
6747
  padding: 0 var(--side-menu-item-horizontal-padding);
6748
6748
  width: 100%;
6749
6749
  background-color: var(--side-menu-item-background);
@@ -6765,7 +6765,7 @@ body {
6765
6765
  .tl-side-menu__dropdown-item:active {
6766
6766
  background-color: var(--side-menu-item-background-active);
6767
6767
  }
6768
- .tl-side-menu__dropdown-item:focus {
6768
+ .tl-side-menu__dropdown-item:focus-visible {
6769
6769
  outline: 2px solid var(--component--focus-ring-color-strong);
6770
6770
  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
6771
6771
  outline-offset: -2px;
@@ -7036,7 +7036,8 @@ body {
7036
7036
  .tl-side-menu--collapsed .tl-side-menu__dropdown .tl-side-menu__item::after {
7037
7037
  display: none;
7038
7038
  }
7039
- .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu {
7039
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu,
7040
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:focus-within .tl-side-menu__dropdown-menu {
7040
7041
  box-sizing: border-box;
7041
7042
  min-height: 48px;
7042
7043
  display: flex;
@@ -7104,10 +7105,12 @@ body {
7104
7105
  overflow-y: auto;
7105
7106
  max-height: 350px;
7106
7107
  }
7107
- .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu {
7108
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu,
7109
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:focus-within .tl-side-menu__dropdown-menu {
7108
7110
  display: flex;
7109
7111
  }
7110
- .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header {
7112
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header,
7113
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:focus-within .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header {
7111
7114
  display: flex;
7112
7115
  align-items: center;
7113
7116
  padding: 16px 24px 15px;
package/dist/tl-side-menu.css CHANGED
@@ -275,7 +275,7 @@ body {
275
275
  border-right: var(--side-menu-item-border-thickness) solid var(--side-menu-item-border-bottom-color);
276
276
  display: flex;
277
277
  align-items: center;
278
- height: var(--side-menu-item-height);
278
+ height: var(--side-menu-sub-item-height);
279
279
  padding: 0 var(--side-menu-item-horizontal-padding);
280
280
  width: 100%;
281
281
  background-color: var(--side-menu-item-background);
@@ -297,7 +297,7 @@ body {
297
297
  .tl-side-menu__dropdown-item:active {
298
298
  background-color: var(--side-menu-item-background-active);
299
299
  }
300
- .tl-side-menu__dropdown-item:focus {
300
+ .tl-side-menu__dropdown-item:focus-visible {
301
301
  outline: 2px solid var(--component--focus-ring-color-strong);
302
302
  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
303
303
  outline-offset: -2px;
@@ -568,7 +568,8 @@ body {
568
568
  .tl-side-menu--collapsed .tl-side-menu__dropdown .tl-side-menu__item::after {
569
569
  display: none;
570
570
  }
571
- .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu {
571
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu,
572
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:focus-within .tl-side-menu__dropdown-menu {
572
573
  box-sizing: border-box;
573
574
  min-height: 48px;
574
575
  display: flex;
@@ -636,10 +637,12 @@ body {
636
637
  overflow-y: auto;
637
638
  max-height: 350px;
638
639
  }
639
- .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu {
640
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu,
641
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:focus-within .tl-side-menu__dropdown-menu {
640
642
  display: flex;
641
643
  }
642
- .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header {
644
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header,
645
+ .tl-side-menu--collapsed .tl-side-menu__dropdown:focus-within .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header {
643
646
  display: flex;
644
647
  align-items: center;
645
648
  padding: 16px 24px 15px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "0.1.0-side-menu-beta.2",
3
+ "version": "0.1.0-side-menu-beta.3",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [