@scania/tegel-lite 0.1.0-side-menu-beta.2 → 0.1.0-side-menu-beta.4

package/dist/components.css

@@ -3954,7 +3954,7 @@ body {
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
+ * Do not edit directly, this file was auto-generated with ./scripts/icon-token-generation.mts
  */
 .tl-icon {
   display: inline-block;
@@ -6587,6 +6587,10 @@ body {
   --side-menu-background: var(--component-side-menu-background-default);
   --side-menu-border-right-color: var(--component-side-menu-border-divider-default);
   --side-menu-border-thickness: var(--unit-1);
+  --side-menu-width-collapsed: var(--unit-68);
+  --side-menu-horizontal-padding: 0px;
+  --side-menu-gap: 0px;
+  --side-menu-dropdown-box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
   --side-menu-item-background: var(--component-side-menu-background-item-link-default);
   --side-menu-item-border-bottom-color: var(--component-side-menu-border-divider-default);
   --side-menu-item-border-thickness: var(--unit-1);
@@ -6599,8 +6603,18 @@ body {
     --component-side-menu-border-item-indicator-default
   );
   --side-menu-item-icon-color: var(--component-side-menu-icon-item-link-default);
+  --side-menu-item-text-width: 168px;
+  --side-menu-item-horizontal-padding: var(--unit-22);
+  --side-menu-item-height: var(--unit-68);
+  --side-menu-item-icon-size: var(--unit-24);
+  --side-menu-sub-item-height: var(--unit-48);
+  --side-menu-sub-item-padding-icon: var(--unit-16) var(--unit-48) var(--unit-16) var(--unit-58);
+  --side-menu-sub-items-gap: 0px;
   --side-menu-item-user-subheading-color: var(--component-side-menu-text-subtitle-default);
+  --side-menu-item-user-text-width: 150px;
   --side-menu-user-gap: var(--unit-16);
+  --side-menu-user-image-size: var(--unit-34);
+  --side-menu-close-button-height: var(--unit-64);
 }
 
 .scania .tl-side-menu {
@@ -6633,6 +6647,12 @@ body {
   --side-menu-close-button-height: var(--unit-36);
 }
 
+.tl-side-menu__item .tl-side-menu__item-text {
+  width: var(--side-menu-item-text-width);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
 .tl-side-menu__item {
   all: unset;
   box-sizing: border-box;
@@ -6739,12 +6759,18 @@ body {
 
 .tl-side-menu__dropdown-item {
   all: unset;
+  font-family: var(--body-02-font-family);
+  font-size: var(--body-02-font-size);
+  line-height: var(--body-02-line-height);
+  font-weight: var(--body-02-font-weight);
+  letter-spacing: var(--body-02-letter-spacing);
+  text-transform: var(--body-02-text-transform);
   box-sizing: border-box;
   border-right: var(--side-menu-item-border-thickness) solid var(--side-menu-item-border-bottom-color);
-  display: flex;
+  display: inline-block;
   align-items: center;
-  height: var(--side-menu-item-height);
-  padding: 0 var(--side-menu-item-horizontal-padding);
+  height: var(--side-menu-sub-item-height);
+  line-height: calc(var(--type-body-02-font-size) * 1px);
   width: 100%;
   background-color: var(--side-menu-item-background);
   color: var(--side-menu-item-text-color);
@@ -6752,12 +6778,9 @@ body {
   border-radius: var(--side-menu-item-border-radius);
   position: relative;
   cursor: pointer;
-  font-family: var(--body-02-font-family);
-  font-size: var(--body-02-font-size);
-  line-height: var(--body-02-line-height);
-  font-weight: var(--body-02-font-weight);
-  letter-spacing: var(--body-02-letter-spacing);
-  text-transform: var(--body-02-text-transform);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 .tl-side-menu__dropdown-item:hover {
   background-color: var(--side-menu-item-background-hover);
@@ -6765,7 +6788,7 @@ body {
 .tl-side-menu__dropdown-item:active {
   background-color: var(--side-menu-item-background-active);
 }
-.tl-side-menu__dropdown-item:focus {
+.tl-side-menu__dropdown-item:focus-visible {
   outline: 2px solid var(--component--focus-ring-color-strong);
   box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
@@ -6774,6 +6797,8 @@ body {
 .tl-side-menu__dropdown-item--selected {
   background-color: var(--side-menu-item-background-selected);
   color: var(--side-menu-item-text-color);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 .tl-side-menu__dropdown-item--selected::before {
   content: "";
@@ -6821,8 +6846,19 @@ body {
   display: block;
   color: var(--side-menu-item-text-color);
 }
+.tl-side-menu:not(.tl-side-menu--collapsed) .tl-side-menu__user-label {
+  width: var(--side-menu-item-user-text-width);
+}
+.tl-side-menu__user-label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
 .tl-side-menu__user-label .subheader {
   color: var(--side-menu-item-user-subheading-color);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 @media (min-width: 992px) {
@@ -7036,18 +7072,28 @@ body {
   .tl-side-menu--collapsed .tl-side-menu__dropdown .tl-side-menu__item::after {
     display: none;
   }
-  .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu {
+  .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu,
+  .tl-side-menu--collapsed .tl-side-menu__dropdown:has(.tl-side-menu__item:focus-visible) .tl-side-menu__dropdown-menu {
     box-sizing: border-box;
     min-height: 48px;
     display: flex;
     align-items: center;
-    border-bottom: var(--tds-side-menu-border-thickness) solid var(--tds-side-menu-item-border-color);
     font-family: var(--type-system-title-01-font-family);
     font-size: calc(var(--type-system-title-01-font-size) * 1px);
     line-height: calc(var(--type-system-title-01-line-height) * 1px);
     font-weight: var(--type-system-title-01-font-weight);
     letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
   }
+  .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header,
+  .tl-side-menu--collapsed .tl-side-menu__dropdown:has(.tl-side-menu__item:focus-visible) .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header {
+    display: flex;
+    align-items: center;
+    padding: 16px 24px 15px;
+  }
+  .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-item,
+  .tl-side-menu--collapsed .tl-side-menu__dropdown:has(.tl-side-menu__item:focus-visible) .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-item {
+    border-bottom: var(--side-menu-border-thickness) solid var(--side-menu-item-border-bottom-color);
+  }
   .tl-side-menu--collapsed .tl-side-menu__dropdown .tl-side-menu__dropdown-item {
     padding: 0 24px;
   }
@@ -7104,14 +7150,6 @@ body {
     overflow-y: auto;
     max-height: 350px;
   }
-  .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu {
-    display: flex;
-  }
-  .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu .tl-side-menu__dropdown-header {
-    display: flex;
-    align-items: center;
-    padding: 16px 24px 15px;
-  }
   .tl-side-menu--collapsed .tl-side-menu__item {
     padding: 0 var(--side-menu-horizontal-padding);
     display: flex;