@scania/tegel-lite 0.1.0-side-menu-beta.3 → 0.1.0-side-menu-beta.5

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,19 @@ 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-item-horizontal-gap: var(--unit-10);
+  --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 +6648,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;
@@ -6640,7 +6661,7 @@ body {
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--side-menu-item-horizontal-gap);
   padding: 0 var(--side-menu-item-horizontal-padding);
   border: none;
   background-color: var(--side-menu-item-background);
@@ -6739,12 +6760,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;
   align-items: center;
+  gap: var(--side-menu-item-horizontal-gap);
   height: var(--side-menu-sub-item-height);
-  padding: 0 var(--side-menu-item-horizontal-padding);
   width: 100%;
   background-color: var(--side-menu-item-background);
   color: var(--side-menu-item-text-color);
@@ -6752,12 +6779,6 @@ 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);
 }
 .tl-side-menu__dropdown-item:hover {
   background-color: var(--side-menu-item-background-hover);
@@ -6774,6 +6795,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 +6844,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) {
@@ -7037,18 +7071,28 @@ body {
     display: none;
   }
   .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu,
-  .tl-side-menu--collapsed .tl-side-menu__dropdown:focus-within .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);
+    gap: var(--side-menu-sub-items-gap);
     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;
   }
@@ -7068,9 +7112,7 @@ body {
     padding: var(--side-menu-sub-items-gap);
     border-radius: var(--side-menu-item-border-radius);
     display: none;
-    min-width: 190px;
-    width: max-content;
-    max-width: 300px;
+    width: 210px;
     flex-direction: column;
   }
   .tl-side-menu--collapsed .tl-side-menu__dropdown-menu::-webkit-scrollbar {
@@ -7105,16 +7147,6 @@ body {
     overflow-y: auto;
     max-height: 350px;
   }
-  .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu,
-  .tl-side-menu--collapsed .tl-side-menu__dropdown:focus-within .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,
-  .tl-side-menu--collapsed .tl-side-menu__dropdown:focus-within .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;

package/dist/global.css

@@ -1472,31 +1472,31 @@ h6 {
 
 :root,
 .tl-mode-light {
-  color: var(--color-foreground-text-strong);
+  color: var(--color-text-strong);
   background-color: var(--color-background-base);
 }
 :root.tl-mode-variant-primary, :root .tl-mode-variant-primary,
 .tl-mode-light.tl-mode-variant-primary,
 .tl-mode-light .tl-mode-variant-primary {
-  color: var(--color-foreground-text-strong);
+  color: var(--color-text-strong);
   background-color: var(--color-background-base);
 }
 :root.tl-mode-variant-secondary, :root .tl-mode-variant-secondary,
 .tl-mode-light.tl-mode-variant-secondary,
 .tl-mode-light .tl-mode-variant-secondary {
-  color: var(--color-foreground-text-strong);
+  color: var(--color-text-strong);
   background-color: var(--color-background-layer-01);
 }
 
 .tl-mode-dark {
-  color: var(--color-foreground-text-strong);
+  color: var(--color-text-strong);
   background-color: var(--color-background-base);
 }
 .tl-mode-dark.tl-mode-variant-primary, .tl-mode-dark .tl-mode-variant-primary {
-  color: var(--color-foreground-text-strong);
+  color: var(--color-text-strong);
   background-color: var(--color-background-base);
 }
 .tl-mode-dark.tl-mode-variant-secondary, .tl-mode-dark .tl-mode-variant-secondary {
-  color: var(--color-foreground-text-strong);
+  color: var(--color-text-strong);
   background-color: var(--color-background-layer-01);
 }