@scania/tegel-lite 1.7.0 → 1.8.0

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 (9) hide show
  1. package/dist/components.css +970 -152
  2. package/dist/global.css +4 -0
  3. package/dist/tl-dropdown.css +28 -43
  4. package/dist/tl-folder-tabs.css +0 -1
  5. package/dist/tl-popover-menu.css +1 -1
  6. package/dist/tl-table.css +878 -0
  7. package/dist/tl-text-field.css +46 -70
  8. package/dist/tl-textarea.css +30 -37
  9. package/package.json +4 -3
package/dist/global.css CHANGED
@@ -14,6 +14,8 @@
14
14
  --unit-20: 20px;
15
15
  --unit-22: 22px;
16
16
  --unit-24: 24px;
17
+ --unit-28: 28px;
18
+ --unit-30: 30px;
17
19
  --unit-32: 32px;
18
20
  --unit-34: 34px;
19
21
  --unit-36: 36px;
@@ -22,8 +24,10 @@
22
24
  --unit-56: 56px;
23
25
  --unit-58: 58px;
24
26
  --unit-64: 64px;
27
+ --unit-66: 66px;
25
28
  --unit-68: 68px;
26
29
  --unit-72: 72px;
30
+ --unit-77: 77px;
27
31
  --unit-80: 80px;
28
32
  --unit-96: 96px;
29
33
  --unit-120: 120px;
package/dist/tl-dropdown.css CHANGED
@@ -237,16 +237,6 @@
237
237
  --dropdown-icon: var(--component-dropdown-icon-default);
238
238
  --dropdown-clear-icon: var(--component--input-icon-control-default);
239
239
  --dropdown-error: var(--component--input-text-error-default);
240
- --dropdown-border-bottom-width: calc(var(--component--input-border-width-bottom) * 1px);
241
- --dropdown-border-left-width: calc(var(--component--input-border-width-left) * 1px);
242
- --dropdown-border-right-width: calc(var(--component--input-border-width-right) * 1px);
243
- --dropdown-border-top-width: calc(var(--component--input-border-width-top) * 1px);
244
- --dropdown-border: var(--component--input-border-default);
245
- --dropdown-border-hover: var(--component--input-border-hover);
246
- --dropdown-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
247
- calc(var(--component--input-border-radius-top-right) * 1px)
248
- calc(var(--component--input-border-radius-bottom-right) * 1px)
249
- calc(var(--component--input-border-radius-bottom-left) * 1px);
250
240
  --dropdown-list-border-radius: calc(var(--component-dropdown-border-radius-default) * 1px);
251
241
  --dropdown-list-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
252
242
  --dropdown-option-background: var(--component-dropdown-background-item-default);
@@ -319,16 +309,14 @@ body {
319
309
  font-weight: var(--type-system-body-01-font-weight);
320
310
  letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
321
311
  text-transform: var(--type-system-body-01-text-transform);
322
- border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-border);
323
- border-left: var(--dropdown-border-left-width) solid var(--dropdown-border);
324
- border-right: var(--dropdown-border-right-width) solid var(--dropdown-border);
325
- border-top: var(--dropdown-border-top-width) solid var(--dropdown-border);
326
- border-radius: var(--dropdown-border-radius);
312
+ 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);
313
+ 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);
314
+ border-style: solid;
315
+ border-color: var(--component--input-border-default);
327
316
  width: 100%;
328
317
  appearance: none;
329
318
  background: var(--dropdown-background);
330
319
  color: var(--dropdown-text);
331
- border-radius: var(--dropdown-border-radius);
332
320
  position: relative;
333
321
  outline: none;
334
322
  text-align: left;
@@ -340,11 +328,10 @@ body {
340
328
  justify-content: flex-start;
341
329
  }
342
330
  :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):hover {
343
- border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-border-hover);
344
- border-left: var(--dropdown-border-left-width) solid var(--dropdown-border-hover);
345
- border-right: var(--dropdown-border-right-width) solid var(--dropdown-border-hover);
346
- border-top: var(--dropdown-border-top-width) solid var(--dropdown-border-hover);
347
- border-radius: var(--dropdown-border-radius);
331
+ 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);
332
+ 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);
333
+ border-style: solid;
334
+ border-color: var(--component--input-border-hover);
348
335
  }
349
336
  :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):focus {
350
337
  outline: 2px solid var(--component--focus-ring-color-strong);
@@ -353,18 +340,16 @@ body {
353
340
  z-index: 1;
354
341
  }
355
342
  .tl-dropdown--error :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input) {
356
- border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-error);
357
- border-left: var(--dropdown-border-left-width) solid var(--dropdown-error);
358
- border-right: var(--dropdown-border-right-width) solid var(--dropdown-error);
359
- border-top: var(--dropdown-border-top-width) solid var(--dropdown-error);
360
- border-radius: var(--dropdown-border-radius);
343
+ 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);
344
+ 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);
345
+ border-style: solid;
346
+ border-color: var(--component--input-text-error-default);
361
347
  }
362
348
  :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):disabled {
363
- border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-border);
364
- border-left: var(--dropdown-border-left-width) solid var(--dropdown-border);
365
- border-right: var(--dropdown-border-right-width) solid var(--dropdown-border);
366
- border-top: var(--dropdown-border-top-width) solid var(--dropdown-border);
367
- border-radius: var(--dropdown-border-radius);
349
+ 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);
350
+ 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);
351
+ border-style: solid;
352
+ border-color: var(--component--input-border-default);
368
353
  box-shadow: none;
369
354
  cursor: not-allowed;
370
355
  pointer-events: none;
@@ -975,7 +960,6 @@ body {
975
960
  .tl-dropdown__input::placeholder,
976
961
  .tl-dropdown:has(.tl-dropdown__select option[value=""]:checked) .tl-dropdown__select {
977
962
  color: var(--dropdown-placeholder);
978
- border-radius: var(--dropdown-border-radius);
979
963
  box-shadow: none;
980
964
  transition: box-shadow 0.2s;
981
965
  }
@@ -1001,11 +985,10 @@ body {
1001
985
  box-shadow: none;
1002
986
  }
1003
987
  :is(.traton, .scania) .tl-dropdown__select:hover:not(:disabled) {
1004
- border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-border-hover);
1005
- border-left: var(--dropdown-border-left-width) solid var(--dropdown-border-hover);
1006
- border-right: var(--dropdown-border-right-width) solid var(--dropdown-border-hover);
1007
- border-top: var(--dropdown-border-top-width) solid var(--dropdown-border-hover);
1008
- border-radius: var(--dropdown-border-radius);
988
+ 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);
989
+ 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);
990
+ border-style: solid;
991
+ border-color: var(--component--input-border-hover);
1009
992
  }
1010
993
  :is(.traton, .scania) .tl-dropdown__select:focus-visible {
1011
994
  outline: 2px solid var(--component--focus-ring-color-strong);
@@ -1015,15 +998,17 @@ body {
1015
998
  }
1016
999
 
1017
1000
  .tl-dropdown__select {
1018
- border-bottom: var(--dropdown-border-bottom-width) solid var(--dropdown-border);
1019
- border-left: var(--dropdown-border-left-width) solid var(--dropdown-border);
1020
- border-right: var(--dropdown-border-right-width) solid var(--dropdown-border);
1021
- border-top: var(--dropdown-border-top-width) solid var(--dropdown-border);
1022
- border-radius: var(--dropdown-border-radius);
1001
+ 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);
1002
+ 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);
1003
+ border-style: solid;
1004
+ border-color: var(--component--input-border-default);
1023
1005
  }
1024
1006
 
1025
1007
  :is(.traton, .scania) .tl-dropdown--error .tl-dropdown__select {
1026
- border-color: var(--dropdown-error);
1008
+ 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);
1009
+ 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);
1010
+ border-style: solid;
1011
+ border-color: var(--component--input-text-error-default);
1027
1012
  }
1028
1013
  :is(.traton, .scania) .tl-dropdown--error .tl-dropdown__select:disabled {
1029
1014
  border-color: transparent;
package/dist/tl-folder-tabs.css CHANGED
@@ -145,7 +145,6 @@
145
145
  --folder-tab-background-selected: var(--component-tabs-background-item-secondary-current-default);
146
146
  }
147
147
 
148
- /* tl-folder-tabs.scss (overlay buttons, no JS) */
149
148
  /* Typography Usage mixins */
150
149
  .tl-folder-tabs__tab {
151
150
  all: unset;
package/dist/tl-popover-menu.css CHANGED
@@ -159,7 +159,7 @@
159
159
  background-color: var(--popover-menu-background-hover);
160
160
  }
161
161
  .tl-popover-menu__item:focus-visible {
162
- outline: 2px solid var(--popover-menu-item-outline-focus);
162
+ outline: 2px solid var(--component--focus-ring-color-strong);
163
163
  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
164
164
  outline-offset: -2px;
165
165
  z-index: 1;