@scania/tegel 1.59.0-header-beta.2 → 1.59.1

package/dist/collection/components/header/core-header-item/core-header-item.css

@@ -1,7 +1,7 @@
 :host {
   font: var(--tds-headline-07);
   letter-spacing: var(--tds-headline-07-ls);
-  color: var(--tds-header-item-color);
+  color: var(--tds-header-nav-item-color);
 }
 :host .item {
   all: unset;

package/dist/collection/components/header/header-brand-symbol/header-brand-symbol.css

@@ -1,16 +1,13 @@
 :host tds-header-item {
   display: none;
 }
-:host tds-header-item {
-  width: var(--tds-header-brand-item-width);
-}
 :host tds-header-item ::slotted(*) {
-  background-image: var(--tds-header-logotype-local), var(--tds-header-logotype-cdn);
-  background-size: var(--tds-header-brand-logo-size) auto;
+  background-image: var(--tds-background-image-scania-symbol-svg-local), var(--tds-background-image-scania-symbol-svg);
+  background-size: 30px auto;
   background-position: center;
   background-repeat: no-repeat;
 }
-@media (width >= 992px) {
+@media (min-width: 992px) {
   :host tds-header-item {
     display: block;
   }

package/dist/collection/components/header/header-dropdown/header-dropdown.css

@@ -19,7 +19,7 @@ body {
   flex-direction: column;
   overflow-y: auto;
   max-height: calc(100vh - var(--tds-header-height));
-  box-shadow: var(--tds-header-dropdown-menu-box);
+  box-shadow: var(--tds-nav-dropdown-menu-box);
   background-color: var(--tds-header-app-launcher-menu-background);
   border-top-right-radius: 0;
   border-top-left-radius: 0;
@@ -60,5 +60,6 @@ body {
 }
 :host .state-open tds-header-item button:hover,
 :host .state-open tds-header-item a:hover {
-  background-color: var(--tds-header-item-background-hover);
+  background-color: var(--tds-nav-item-background-hover);
+  box-shadow: none;
 }

package/dist/collection/components/header/header-dropdown-list/header-dropdown-list.css

@@ -6,7 +6,7 @@
   margin: 0;
   list-style: none;
   border-radius: unset;
-  background-color: var(--tds-header-dropdown-background);
+  background-color: var(--tds-header-app-launcher-menu-bg);
 }
 @media all and (max-width: 384px) {
   :host {

package/dist/collection/components/header/header-dropdown-list-item/header-dropdown-list-item.css

@@ -19,11 +19,11 @@
   width: 100%;
   font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);
-  background-color: var(--tds-header-dropdown-item-background);
-  color: var(--tds-header-dropdown-item-color);
+  background-color: var(--tds-nav-dropdown-item-background);
+  color: var(--tds-header-nav-item-dropdown-opened-color);
 }
 :host .component ::slotted(a:hover) {
-  background-color: var(--tds-header-dropdown-item-background-hover);
+  background-color: var(--tds-nav-item-background-hover);
   cursor: pointer;
 }
 :host .component ::slotted(a:focus-visible) {
@@ -32,20 +32,22 @@
   outline-offset: -2px;
 }
 :host .component-selected {
-  background-color: var(--tds-header-dropdown-item-background-selected);
+  background-color: var(--tds-nav-item-background-selected);
   padding-right: 4px;
-  border-left: 4px solid var(--tds-header-dropdown-item-border-color-selected);
+  border-left-width: 4px;
+  border-left-style: solid;
+  border-left-color: var(--tds-nav-item-border-color-active);
 }
 :host .component-selected ::slotted(a),
 :host .component-selected ::slotted(button) {
-  background-color: var(--tds-header-dropdown-item-background-selected);
+  background-color: var(--tds-nav-item-background-selected);
 }
 :host .component-selected:focus-within {
   border-left: none;
 }
 
 :host(:not(:last-child)) {
-  border-bottom: 1px solid var(--tds-header-dropdown-item-border-color);
+  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
 }
 
 :host([size=lg]) {

package/dist/collection/components/header/header-dropdown-list-user/header-dropdown-list-user.css

@@ -4,16 +4,16 @@
   height: 84px;
 }
 :host .user-box {
-  gap: var(--tds-header-avatar-item-padding);
+  gap: 16px;
   width: 100%;
-  padding: 0 var(--tds-header-avatar-item-padding);
+  padding: 0 16px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--tds-header-dropdown-item-border-color);
+  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
 }
 :host img,
 :host slot[name=thumbnail]::slotted(*) {
-  width: var(--tds-header-avatar-item-size);
+  width: 34px;
   border-radius: 100%;
 }
 :host .user-content {

package/dist/collection/components/header/header-item/header-item.css

@@ -1,16 +1,9 @@
-/* Typography Usage mixins */
 :host ::slotted(button),
 :host ::slotted(a) {
   all: unset;
   box-sizing: border-box;
-  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);
-  color: var(--tds-header-item-color);
   background-color: var(--tds-header-background);
-  border-right: 1px solid var(--tds-header-item-border);
+  border-right: 1px solid var(--tds-header--basic-element-border);
   width: 100%;
   height: 100%;
   cursor: pointer;
@@ -26,10 +19,12 @@
 :host ::slotted(button:hover),
 :host ::slotted(a:hover) {
   background-color: var(--tds-header-item-hover);
+  box-shadow: inset 0 -2px 0 0 var(--tds-header-item-border-hover);
 }
 :host ::slotted(button:active),
 :host ::slotted(a:active) {
   background-color: var(--tds-header-item-active);
+  box-shadow: inset 0 -2px 0 0 var(--tds-header-item-border-active);
 }
 :host ::slotted(button:focus-visible),
 :host ::slotted(a:focus-visible) {
@@ -41,14 +36,9 @@
 }
 :host .component-active ::slotted(button),
 :host .component-active ::slotted(a) {
-  background-color: var(--tds-header-item-background-open);
-  color: var(--tds-header-item-open-color);
-  border-color: var(--tds-header-item-border-open);
-  box-shadow: inset 0 -4px 0 0 var(--tds-header-item-border-hover);
-}
-:host .component-active ::slotted(button:hover),
-:host .component-active ::slotted(a:hover) {
-  background-color: var(--tds-header-dropdown-item-background-hover);
+  background-color: var(--tds-header--basic-element-background-open);
+  color: var(--tds-header-nav-item-dropdown-opened-color);
+  border-color: var(--tds-header--basic-element-border-open);
 }
 :host .component-selected:not(.component-active) ::slotted(button),
 :host .component-selected:not(.component-active) ::slotted(a) {

package/dist/collection/components/header/header-launcher/header-launcher.css

@@ -22,7 +22,7 @@ body {
   flex-direction: column;
   overflow-y: auto;
   max-height: calc(100vh - var(--tds-header-height));
-  box-shadow: var(--tds-header-dropdown-menu-box);
+  box-shadow: var(--tds-nav-dropdown-menu-box);
   background-color: var(--tds-header-app-launcher-menu-background);
   border-radius: 0;
 }

package/dist/collection/components/header/header-launcher-grid-item/header-launcher-grid-item.css

@@ -7,7 +7,7 @@
 :host ::slotted(button) {
   all: unset;
   box-sizing: border-box;
-  border-right: 1px solid var(--tds-header-dropdown-item-border-color);
+  border-right: 1px solid var(--tds-nav-item-border-color);
   width: 100%;
   height: 100%;
   border: none;
@@ -20,7 +20,7 @@
   gap: 8px;
   font: var(--tds-detail-05);
   letter-spacing: var(--tds-detail-05-ls);
-  background-color: var(--tds-header-app-launcher-menu-background);
+  background-color: var(--tds-header-app-launcher-menu-bg);
   color: var(--tds-header-app-launcher-grid-color);
   border-radius: 4px;
   transition: background-color 150ms ease;

package/dist/collection/components/header/header-launcher-grid-title/header-launcher-grid-title.css

@@ -1,14 +1,14 @@
 .tds-header-launcher-grid-title {
   all: unset;
   box-sizing: border-box;
-  font: var(--tds-detail-06);
-  letter-spacing: var(--tds-detail-06-ls);
+  font: var(--tds-detail-04);
+  letter-spacing: var(--tds-detail-04-ls);
   color: var(--tds-header-app-launcher-grid-category-title-color);
   text-transform: uppercase;
   height: 48px;
   padding: 0 16px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--tds-header-dropdown-item-border-color);
+  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
   margin: 0;
 }

package/dist/collection/components/header/header-launcher-list-item/header-launcher-list-item.css

@@ -1,4 +1,4 @@
 :host {
   display: block;
-  border-bottom: 1px solid var(--tds-header-dropdown-item-border-color);
+  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
 }

package/dist/collection/components/header/header-launcher-list-title/header-launcher-list-title.css

@@ -9,6 +9,6 @@
   padding: 0 16px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--tds-header-dropdown-item-border-color);
+  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
   margin: 0;
 }

package/dist/collection/components/header/header-title/header-title.css

@@ -1,15 +1,10 @@
-/* Typography Usage mixins */
 h4 {
-  font-family: var(--headline-06-font-family);
-  font-size: var(--headline-06-font-size);
-  line-height: var(--headline-06-line-height);
-  font-weight: var(--headline-06-font-weight);
-  letter-spacing: var(--headline-06-letter-spacing);
-  text-transform: var(--headline-06-text-transform);
   box-sizing: border-box;
-  color: var(--tds-header-item-color);
-  font-family: var(--tds-header-title-font-family);
-  font-weight: var(--tds-header-title-font-weight);
+  color: var(--tds-header-nav-item-color);
+  font-size: 14px;
+  font-weight: normal;
+  font-family: var(--tds-font-family-headline);
+  letter-spacing: normal;
   position: relative;
   white-space: nowrap;
   text-overflow: ellipsis;

package/dist/collection/components/header/header.css

@@ -14,6 +14,13 @@ body {
   scrollbar-width: thin;
 }
 
+html,
+:root {
+  --tds-nav-dropdown-menu-box: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
+  --tds-nav-dropdown-item-border-radius: 0 0 4px 4px;
+  --tds-font-family-headline: "Scania Sans Headline", arial, helvetica, sans-serif;
+}
+
 tds-header {
   display: block;
   height: var(--tds-header-height);
@@ -51,7 +58,7 @@ nav .tds-header-middle-spacer {
   display: block;
   flex-grow: 1;
   height: var(--tds-header-height);
-  border-right: 1px solid var(--tds-header-item-border);
+  border-right: 1px solid var(--tds-header--basic-element-border);
 }
 @media screen and (min-width: 992px) {
   nav tds-header-dropdown,
@@ -62,5 +69,5 @@ nav .tds-header-middle-spacer {
 nav tds-header-item:nth-child(3),
 nav tds-header-dropdown:nth-child(3) {
   /* Adds a left border to the button after the title, if any */
-  border-left: 1px solid var(--tds-header-item-border);
+  border-left: 1px solid var(--tds-header--basic-element-border);
 }

package/dist/collection/components/side-menu/side-menu-dropdown/side-menu-dropdown.css

@@ -19,7 +19,7 @@
   --side-menu-width: 69px;
   position: absolute;
   left: var(--side-menu-width);
-  box-shadow: var(--tds-header-dropdown-menu-box);
+  box-shadow: var(--tds-nav-dropdown-menu-box);
   background-color: var(--tds-sidebar-side-menu-subnav-background);
 }
 :host .state-collapsed .menu .heading-collapsed {

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.css

@@ -12,7 +12,7 @@
 :host .component ::slotted(button) {
   all: unset;
   box-sizing: border-box;
-  border-right: 1px solid var(--tds-header-dropdown-item-border-color);
+  border-right: 1px solid var(--tds-nav-item-border-color);
   display: flex;
   align-items: center;
   height: 100%;
@@ -20,8 +20,8 @@
   width: 100%;
   font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);
-  background-color: var(--tds-header-dropdown-item-background);
-  color: var(--tds-header-item-open-color);
+  background-color: var(--tds-header-nav-item-dropdown-opened-background);
+  color: var(--tds-header-nav-item-dropdown-opened-color);
   border: none;
 }
 :host .component ::slotted(a:hover),
@@ -96,7 +96,7 @@
 }
 :host .component.component-selected ::slotted(a),
 :host .component.component-selected ::slotted(button) {
-  background-color: var(--tds-header-dropdown-item-background-selected);
+  background-color: var(--tds-header-nav-item-dropdown-opened-background-selected);
   position: relative;
 }
 :host .component.component-selected ::slotted(a)::before,
@@ -111,7 +111,7 @@
 }
 :host .component.component-selected ::slotted(a:focus-visible),
 :host .component.component-selected ::slotted(button:focus-visible) {
-  background-color: var(--tds-header-dropdown-item-background-selected);
+  background-color: var(--tds-header-nav-item-dropdown-opened-background-selected);
   position: relative;
 }
 :host .component.component-selected ::slotted(a:focus-visible)::before,

package/dist/collection/tegel-lite/shipped-components.js

@@ -28,7 +28,6 @@ export const SHIPPED_COMPONENTS = [
   'tl-checkbox',
   'tl-divider',
   'tl-footer',
-  'tl-header',
   'tl-icon',
   'tl-link',
   'tl-message',