@scania/tegel-lite 1.6.0 → 1.7.0-datetime-vars-beta.0

package/dist/tl-dropdown.css

@@ -237,16 +237,6 @@
   --dropdown-icon: var(--component-dropdown-icon-default);
   --dropdown-clear-icon: var(--component--input-icon-control-default);
   --dropdown-error: var(--component--input-text-error-default);
-  --dropdown-border-bottom-width: calc(var(--component--input-border-width-bottom) * 1px);
-  --dropdown-border-left-width: calc(var(--component--input-border-width-left) * 1px);
-  --dropdown-border-right-width: calc(var(--component--input-border-width-right) * 1px);
-  --dropdown-border-top-width: calc(var(--component--input-border-width-top) * 1px);
-  --dropdown-border: var(--component--input-border-default);
-  --dropdown-border-hover: var(--component--input-border-hover);
-  --dropdown-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
-    calc(var(--component--input-border-radius-top-right) * 1px)
-    calc(var(--component--input-border-radius-bottom-right) * 1px)
-    calc(var(--component--input-border-radius-bottom-left) * 1px);
   --dropdown-list-border-radius: calc(var(--component-dropdown-border-radius-default) * 1px);
   --dropdown-list-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
   --dropdown-option-background: var(--component-dropdown-background-item-default);
@@ -319,16 +309,14 @@ body {
   font-weight: var(--type-system-body-01-font-weight);
   letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
   text-transform: var(--type-system-body-01-text-transform);
-  border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-border);
-  border-left: var(--dropdown-border-left-width) solid var(--dropdown-border);
-  border-right: var(--dropdown-border-right-width) solid var(--dropdown-border);
-  border-top: var(--dropdown-border-top-width) solid var(--dropdown-border);
-  border-radius: var(--dropdown-border-radius);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-border-default);
   width: 100%;
   appearance: none;
   background: var(--dropdown-background);
   color: var(--dropdown-text);
-  border-radius: var(--dropdown-border-radius);
   position: relative;
   outline: none;
   text-align: left;
@@ -340,11 +328,10 @@ body {
   justify-content: flex-start;
 }
 :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):hover {
-  border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-border-hover);
-  border-left: var(--dropdown-border-left-width) solid var(--dropdown-border-hover);
-  border-right: var(--dropdown-border-right-width) solid var(--dropdown-border-hover);
-  border-top: var(--dropdown-border-top-width) solid var(--dropdown-border-hover);
-  border-radius: var(--dropdown-border-radius);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-border-hover);
 }
 :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):focus {
   outline: 2px solid var(--component--focus-ring-color-strong);
@@ -353,18 +340,16 @@ body {
   z-index: 1;
 }
 .tl-dropdown--error :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input) {
-  border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-error);
-  border-left: var(--dropdown-border-left-width) solid var(--dropdown-error);
-  border-right: var(--dropdown-border-right-width) solid var(--dropdown-error);
-  border-top: var(--dropdown-border-top-width) solid var(--dropdown-error);
-  border-radius: var(--dropdown-border-radius);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-text-error-default);
 }
 :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):disabled {
-  border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-border);
-  border-left: var(--dropdown-border-left-width) solid var(--dropdown-border);
-  border-right: var(--dropdown-border-right-width) solid var(--dropdown-border);
-  border-top: var(--dropdown-border-top-width) solid var(--dropdown-border);
-  border-radius: var(--dropdown-border-radius);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-border-default);
   box-shadow: none;
   cursor: not-allowed;
   pointer-events: none;
@@ -975,7 +960,6 @@ body {
 .tl-dropdown__input::placeholder,
 .tl-dropdown:has(.tl-dropdown__select option[value=""]:checked) .tl-dropdown__select {
   color: var(--dropdown-placeholder);
-  border-radius: var(--dropdown-border-radius);
   box-shadow: none;
   transition: box-shadow 0.2s;
 }
@@ -1001,11 +985,10 @@ body {
   box-shadow: none;
 }
 :is(.traton, .scania) .tl-dropdown__select:hover:not(:disabled) {
-  border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-border-hover);
-  border-left: var(--dropdown-border-left-width) solid var(--dropdown-border-hover);
-  border-right: var(--dropdown-border-right-width) solid var(--dropdown-border-hover);
-  border-top: var(--dropdown-border-top-width) solid var(--dropdown-border-hover);
-  border-radius: var(--dropdown-border-radius);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-border-hover);
 }
 :is(.traton, .scania) .tl-dropdown__select:focus-visible {
   outline: 2px solid var(--component--focus-ring-color-strong);
@@ -1015,15 +998,17 @@ body {
 }
 
 .tl-dropdown__select {
-  border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-border);
-  border-left: var(--dropdown-border-left-width) solid var(--dropdown-border);
-  border-right: var(--dropdown-border-right-width) solid var(--dropdown-border);
-  border-top: var(--dropdown-border-top-width) solid var(--dropdown-border);
-  border-radius: var(--dropdown-border-radius);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-border-default);
 }
 
 :is(.traton, .scania) .tl-dropdown--error .tl-dropdown__select {
-  border-color: var(--dropdown-error);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-text-error-default);
 }
 :is(.traton, .scania) .tl-dropdown--error .tl-dropdown__select:disabled {
   border-color: transparent;

package/dist/tl-folder-tabs.css

@@ -145,7 +145,6 @@
   --folder-tab-background-selected: var(--component-tabs-background-item-secondary-current-default);
 }
 
-/* tl-folder-tabs.scss (overlay buttons, no JS) */
 /* Typography Usage mixins */
 .tl-folder-tabs__tab {
   all: unset;

package/dist/tl-icon.css

@@ -36,6 +36,10 @@
   mask-image: var(--icon-adblue_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--agent {
+  mask-image: var(--icon-agent-svg);
+  background-color: currentcolor;
+}
 .tl-icon--arrow_diagonal {
   mask-image: var(--icon-arrow_diagonal-svg);
   background-color: currentcolor;
@@ -284,10 +288,6 @@
   mask-image: var(--icon-document_tool-svg);
   background-color: currentcolor;
 }
-.tl-icon--document_word {
-  mask-image: var(--icon-document_word-svg);
-  background-color: currentcolor;
-}
 .tl-icon--document_wrong {
   mask-image: var(--icon-document_wrong-svg);
   background-color: currentcolor;
@@ -312,6 +312,10 @@
   mask-image: var(--icon-download-svg);
   background-color: currentcolor;
 }
+.tl-icon--driver {
+  mask-image: var(--icon-driver-svg);
+  background-color: currentcolor;
+}
 .tl-icon--driving_licence {
   mask-image: var(--icon-driving_licence-svg);
   background-color: currentcolor;
@@ -340,6 +344,10 @@
   mask-image: var(--icon-email-svg);
   background-color: currentcolor;
 }
+.tl-icon--employee {
+  mask-image: var(--icon-employee-svg);
+  background-color: currentcolor;
+}
 .tl-icon--engine {
   mask-image: var(--icon-engine-svg);
   background-color: currentcolor;
@@ -580,6 +588,10 @@
   mask-image: var(--icon-layer_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--line_chart {
+  mask-image: var(--icon-line_chart-svg);
+  background-color: currentcolor;
+}
 .tl-icon--link {
   mask-image: var(--icon-link-svg);
   background-color: currentcolor;
@@ -600,8 +612,8 @@
   mask-image: var(--icon-lock-svg);
   background-color: currentcolor;
 }
-.tl-icon--lock_inactive {
-  mask-image: var(--icon-lock_inactive-svg);
+.tl-icon--manager {
+  mask-image: var(--icon-manager-svg);
   background-color: currentcolor;
 }
 .tl-icon--map_cursor {
@@ -632,6 +644,10 @@
   mask-image: var(--icon-message-svg);
   background-color: currentcolor;
 }
+.tl-icon--message_ai {
+  mask-image: var(--icon-message_ai-svg);
+  background-color: currentcolor;
+}
 .tl-icon--message_inactive {
   mask-image: var(--icon-message_inactive-svg);
   background-color: currentcolor;
@@ -640,6 +656,10 @@
   mask-image: var(--icon-microphone-svg);
   background-color: currentcolor;
 }
+.tl-icon--microphone_ai {
+  mask-image: var(--icon-microphone_ai-svg);
+  background-color: currentcolor;
+}
 .tl-icon--microphone_inactive {
   mask-image: var(--icon-microphone_inactive-svg);
   background-color: currentcolor;
@@ -836,6 +856,10 @@
   mask-image: var(--icon-save_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--scissor {
+  mask-image: var(--icon-scissor-svg);
+  background-color: currentcolor;
+}
 .tl-icon--search {
   mask-image: var(--icon-search-svg);
   background-color: currentcolor;
@@ -880,6 +904,10 @@
   mask-image: var(--icon-sorting-svg);
   background-color: currentcolor;
 }
+.tl-icon--sparkle {
+  mask-image: var(--icon-sparkle-svg);
+  background-color: currentcolor;
+}
 .tl-icon--speedometer {
   mask-image: var(--icon-speedometer-svg);
   background-color: currentcolor;
@@ -888,6 +916,10 @@
   mask-image: var(--icon-speedometer_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--split {
+  mask-image: var(--icon-split-svg);
+  background-color: currentcolor;
+}
 .tl-icon--star {
   mask-image: var(--icon-star-svg);
   background-color: currentcolor;
@@ -896,6 +928,10 @@
   mask-image: var(--icon-support-svg);
   background-color: currentcolor;
 }
+.tl-icon--table {
+  mask-image: var(--icon-table-svg);
+  background-color: currentcolor;
+}
 .tl-icon--target {
   mask-image: var(--icon-target-svg);
   background-color: currentcolor;

package/dist/tl-popover-menu.css

@@ -159,7 +159,7 @@
   background-color: var(--popover-menu-background-hover);
 }
 .tl-popover-menu__item:focus-visible {
-  outline: 2px solid var(--popover-menu-item-outline-focus);
+  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;
   z-index: 1;