@scania/tegel-lite 1.4.0 → 1.6.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 (11) hide show
  1. package/dist/components.css +5401 -3264
  2. package/dist/global.css +4 -4
  3. package/dist/tl-chip.css +239 -0
  4. package/dist/tl-dropdown.css +1030 -0
  5. package/dist/tl-folder-tabs.css +255 -0
  6. package/dist/tl-inline-tabs.css +276 -0
  7. package/dist/tl-navigation-tabs.css +287 -0
  8. package/dist/tl-stepper.css +441 -0
  9. package/dist/tl-text-field.css +8 -0
  10. package/dist/tl-textarea.css +8 -0
  11. package/package.json +7 -1
package/dist/global.css CHANGED
@@ -1358,18 +1358,18 @@ html {
1358
1358
  .tds-mode-light {
1359
1359
  --tl-scrollbar-track-color: transparent;
1360
1360
  --tl-scrollbar-thumb-color: var(--component-scrollbar-background-thumb-default);
1361
- --tl-scrollbar-thumb-border-radius: calc(var(--component-scrollbar-width-radius-default) * 1px);
1361
+ --tl-scrollbar-thumb-border-radius: calc(var(--component-scrollbar-border-radius-default) * 1px);
1362
1362
  --tl-scrollbar-hover-thumb-border-radius: calc(
1363
- var(--component-scrollbar-width-radius-hover) * 1px
1363
+ var(--component-scrollbar-border-radius-default) * 1px
1364
1364
  );
1365
1365
  }
1366
1366
 
1367
1367
  .tl-mode-dark,
1368
1368
  .tds-mode-dark {
1369
1369
  --tl-scrollbar-thumb-color: var(--component-scrollbar-background-thumb-default);
1370
- --tl-scrollbar-thumb-border-radius: calc(var(--component-scrollbar-width-radius-default) * 1px);
1370
+ --tl-scrollbar-thumb-border-radius: calc(var(--component-scrollbar-border-radius-default) * 1px);
1371
1371
  --tl-scrollbar-hover-thumb-border-radius: calc(
1372
- var(--component-scrollbar-width-radius-hover) * 1px
1372
+ var(--component-scrollbar-border-radius-default) * 1px
1373
1373
  );
1374
1374
  }
1375
1375
 
package/dist/tl-chip.css ADDED
@@ -0,0 +1,239 @@
1
+ /* Typography Usage mixins */
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+ :root,
6
+ .tds-mode-light,
7
+ .scania .tds-mode-light,
8
+ .scania.tds-mode-light,
9
+ .scania .tl-mode-light,
10
+ .scania.tl-mode-light {
11
+ --component-chip-background-standard-default: var(--scania-color-grey-150);
12
+ --component-chip-background-standard-hover: var(--scania-color-grey-200);
13
+ --component-chip-background-selected-default: var(--color-system-info-default);
14
+ --component-chip-background-selected-hover: var(--color-system-info-defined);
15
+ --component-chip-border-radius-full: var(--scania-unit-24);
16
+ --component-chip-border-radius-none: var(--scania-unit-0);
17
+ --component-chip-border-radius-default: var(--scania-unit-24);
18
+ --component-chip-border-selected-default: var(--color-border-soft);
19
+ --component-chip-border-selected-hover: var(--color-border-strong);
20
+ --component-chip-border-selected-active: var(--color-border-none);
21
+ --component-chip-border-standard-default: var(--color-border-subtle);
22
+ --component-chip-border-standard-hover: var(--color-border-subtle);
23
+ --component-chip-border-standard-active: var(--color-border-none);
24
+ --component-chip-focus-ring-radius-default: var(--component--focus-ring-radius-full);
25
+ --component-chip-icon-default: var(--color-icon-strong);
26
+ --component-chip-icon-hover: var(--component-chip-icon-default);
27
+ --component-chip-icon-active: var(--component-chip-icon-default);
28
+ --component-chip-icon-selected-default: var(--color-icon-inverse-strong);
29
+ --component-chip-icon-selected-hover: var(--component-chip-icon-selected-default);
30
+ --component-chip-icon-selected-active: var(--component-chip-icon-selected-default);
31
+ --component-chip-opacity-disabled: var(--scania-opacity-25);
32
+ --component-chip-text-standard-default: var(--color-text-strong);
33
+ --component-chip-text-standard-hover: var(--color-text-strong);
34
+ --component-chip-text-standard-active: var(--color-text-strong);
35
+ --component-chip-text-selected-default: var(--color-text-inverse-strong);
36
+ --component-chip-text-selected-hover: var(--color-text-strong);
37
+ --component-chip-text-selected-active: var(--color-text-strong);
38
+ }
39
+
40
+ .traton .tds-mode-light,
41
+ .traton.tds-mode-light,
42
+ .traton .tl-mode-light,
43
+ .traton.tl-mode-light {
44
+ --component-chip-background-standard-default: var(--traton-color-grey-200);
45
+ --component-chip-background-standard-hover: var(--traton-color-grey-400);
46
+ --component-chip-background-selected-default: var(--traton-color-grey-300);
47
+ --component-chip-background-selected-hover: var(--traton-color-grey-400);
48
+ --component-chip-border-radius-full: var(--traton-unit-24);
49
+ --component-chip-border-radius-none: var(--traton-unit-0);
50
+ --component-chip-border-radius-default: var(--traton-unit-2);
51
+ --component-chip-border-selected-default: var(--color-border-none);
52
+ --component-chip-border-selected-hover: var(--color-border-none);
53
+ --component-chip-border-selected-active: var(--color-border-none);
54
+ --component-chip-border-standard-default: var(--color-border-none);
55
+ --component-chip-border-standard-hover: var(--color-border-none);
56
+ --component-chip-border-standard-active: var(--color-border-none);
57
+ --component-chip-focus-ring-radius-default: var(--component--focus-ring-radius-medium);
58
+ --component-chip-icon-default: var(--color-icon-strong);
59
+ --component-chip-icon-hover: var(--component-chip-icon-default);
60
+ --component-chip-icon-active: var(--component-chip-icon-default);
61
+ --component-chip-icon-selected-default: var(--color-icon-strong);
62
+ --component-chip-icon-selected-hover: var(--component-chip-icon-selected-default);
63
+ --component-chip-icon-selected-active: var(--component-chip-icon-selected-default);
64
+ --component-chip-opacity-disabled: var(--traton-opacity-25);
65
+ --component-chip-text-standard-default: var(--color-text-strong);
66
+ --component-chip-text-standard-hover: var(--color-text-strong);
67
+ --component-chip-text-standard-active: var(--color-text-strong);
68
+ --component-chip-text-selected-default: var(--color-text-strong);
69
+ --component-chip-text-selected-hover: var(--color-text-strong);
70
+ --component-chip-text-selected-active: var(--color-text-strong);
71
+ }
72
+
73
+ .tds-mode-dark,
74
+ .scania .tds-mode-dark,
75
+ .scania.tds-mode-dark,
76
+ .scania .tl-mode-dark,
77
+ .scania.tl-mode-dark {
78
+ --component-chip-background-standard-default: var(--scania-color-grey-800);
79
+ --component-chip-background-standard-hover: var(--scania-color-grey-750);
80
+ --component-chip-background-selected-default: var(--color-system-info-subtle);
81
+ --component-chip-background-selected-hover: var(--scania-color-blue-500);
82
+ --component-chip-border-radius-full: var(--scania-unit-24);
83
+ --component-chip-border-radius-none: var(--scania-unit-0);
84
+ --component-chip-border-radius-default: var(--scania-unit-24);
85
+ --component-chip-border-selected-default: var(--color-border-soft);
86
+ --component-chip-border-selected-hover: var(--color-border-strong);
87
+ --component-chip-border-selected-active: var(--color-border-none);
88
+ --component-chip-border-standard-default: var(--color-border-subtle);
89
+ --component-chip-border-standard-hover: var(--color-border-subtle);
90
+ --component-chip-border-standard-active: var(--color-border-none);
91
+ --component-chip-focus-ring-radius-default: var(--component--focus-ring-radius-full);
92
+ --component-chip-icon-default: var(--color-icon-strong);
93
+ --component-chip-icon-hover: var(--component-chip-icon-default);
94
+ --component-chip-icon-active: var(--component-chip-icon-default);
95
+ --component-chip-icon-selected-default: var(--color-icon-strong);
96
+ --component-chip-icon-selected-hover: var(--component-chip-icon-selected-default);
97
+ --component-chip-icon-selected-active: var(--component-chip-icon-selected-default);
98
+ --component-chip-opacity-disabled: var(--scania-opacity-25);
99
+ --component-chip-text-standard-default: var(--color-text-strong);
100
+ --component-chip-text-standard-hover: var(--color-text-strong);
101
+ --component-chip-text-standard-active: var(--color-text-strong);
102
+ --component-chip-text-selected-default: var(--color-text-strong);
103
+ --component-chip-text-selected-hover: var(--color-text-inverse-strong);
104
+ --component-chip-text-selected-active: var(--color-text-inverse-strong);
105
+ }
106
+
107
+ .traton .tds-mode-dark,
108
+ .traton.tds-mode-dark,
109
+ .traton .tl-mode-dark,
110
+ .traton.tl-mode-dark {
111
+ --component-chip-background-standard-default: var(--traton-color-blue-800);
112
+ --component-chip-background-standard-hover: var(--traton-color-blue-600);
113
+ --component-chip-background-selected-default: var(--traton-color-blue-400);
114
+ --component-chip-background-selected-hover: var(--traton-color-blue-300);
115
+ --component-chip-border-radius-full: var(--traton-unit-24);
116
+ --component-chip-border-radius-none: var(--traton-unit-0);
117
+ --component-chip-border-radius-default: var(--traton-unit-2);
118
+ --component-chip-border-selected-default: var(--color-border-none);
119
+ --component-chip-border-selected-hover: var(--color-border-none);
120
+ --component-chip-border-selected-active: var(--color-border-none);
121
+ --component-chip-border-standard-default: var(--color-border-none);
122
+ --component-chip-border-standard-hover: var(--color-border-none);
123
+ --component-chip-border-standard-active: var(--color-border-none);
124
+ --component-chip-focus-ring-radius-default: var(--component--focus-ring-radius-medium);
125
+ --component-chip-icon-default: var(--color-icon-strong);
126
+ --component-chip-icon-hover: var(--component-chip-icon-default);
127
+ --component-chip-icon-active: var(--component-chip-icon-default);
128
+ --component-chip-icon-selected-default: var(--color-icon-inverse-strong);
129
+ --component-chip-icon-selected-hover: var(--component-chip-icon-selected-default);
130
+ --component-chip-icon-selected-active: var(--component-chip-icon-selected-default);
131
+ --component-chip-opacity-disabled: var(--traton-opacity-25);
132
+ --component-chip-text-standard-default: var(--color-text-strong);
133
+ --component-chip-text-standard-hover: var(--color-text-strong);
134
+ --component-chip-text-standard-active: var(--color-text-strong);
135
+ --component-chip-text-selected-default: var(--color-text-inverse-strong);
136
+ --component-chip-text-selected-hover: var(--color-text-inverse-strong);
137
+ --component-chip-text-selected-active: var(--color-text-inverse-strong);
138
+ }
139
+
140
+ .tl-chip {
141
+ --chip-text: var(--component-chip-text-standard-default);
142
+ --chip-text-active: var(--component-chip-text-selected-default);
143
+ --chip-background: var(--component-chip-background-standard-default);
144
+ --chip-background-hover: var(--component-chip-background-standard-hover);
145
+ --chip-background-focus: var(--component-chip-background-standard-hover);
146
+ --chip-background-active: var(--component-chip-background-selected-default);
147
+ --chip-background-active-hover: var(--component-chip-background-selected-hover);
148
+ --chip-focused-on-selected: var(--component-chip-background-selected-default);
149
+ --chip-border: var(--component-chip-border-standard-default);
150
+ --chip-border-hover: var(--component-chip-border-standard-hover);
151
+ --chip-border-selected: var(--component-chip-border-selected-default);
152
+ --chip-border-selected-hover: var(--component-chip-border-selected-hover);
153
+ --chip-border-radius: calc(var(--component-chip-border-radius-default) * 1px);
154
+ --chip-opacity-disabled: calc(var(--component-chip-opacity-disabled) / 100);
155
+ --chip-icon-fill: var(--component-chip-text-standard-default);
156
+ --chip-icon-fill-active: var(--component-chip-text-selected-default);
157
+ }
158
+
159
+ .tl-chip {
160
+ font-family: var(--detail-02-font-family);
161
+ font-size: var(--detail-02-font-size);
162
+ line-height: var(--detail-02-line-height);
163
+ font-weight: var(--detail-02-font-weight);
164
+ letter-spacing: var(--detail-02-letter-spacing);
165
+ text-transform: var(--detail-02-text-transform);
166
+ display: inline-flex;
167
+ align-items: center;
168
+ gap: 8px;
169
+ padding: 8px 16px;
170
+ border-radius: var(--chip-border-radius);
171
+ border: 1px solid var(--chip-border);
172
+ background-color: var(--chip-background);
173
+ color: var(--chip-text);
174
+ cursor: pointer;
175
+ white-space: nowrap;
176
+ user-select: none;
177
+ text-decoration: none;
178
+ transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, outline-color 0.15s ease-in-out;
179
+ }
180
+ .tl-chip:hover {
181
+ background-color: var(--chip-background-hover);
182
+ border-color: var(--chip-border-hover);
183
+ }
184
+ .tl-chip:focus-visible {
185
+ outline: 2px solid var(--component--focus-ring-color-strong);
186
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
187
+ outline-offset: 1px;
188
+ z-index: 1;
189
+ background-color: var(--chip-background-focus);
190
+ }
191
+ .tl-chip--sm {
192
+ padding: 0 12px;
193
+ min-height: 24px;
194
+ gap: 6px;
195
+ }
196
+ .tl-chip--lg {
197
+ padding: 0 16px;
198
+ min-height: 32px;
199
+ gap: 8px;
200
+ }
201
+ .tl-chip--selected {
202
+ background-color: var(--chip-background-active);
203
+ color: var(--chip-text-active);
204
+ border-color: var(--chip-border-selected);
205
+ }
206
+ .tl-chip--selected:hover {
207
+ background-color: var(--chip-background-active-hover);
208
+ border-color: var(--chip-border-selected-hover);
209
+ }
210
+ .tl-chip--selected:focus-visible {
211
+ outline: 2px solid var(--component--focus-ring-color-strong);
212
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
213
+ outline-offset: 1px;
214
+ z-index: 1;
215
+ background-color: var(--chip-focused-on-selected);
216
+ }
217
+ .tl-chip:disabled {
218
+ cursor: not-allowed;
219
+ pointer-events: none;
220
+ opacity: var(--chip-opacity-disabled);
221
+ }
222
+ .tl-chip--lg.tl-chip--prefix:not(.tl-chip--suffix) {
223
+ padding: 0 16px 0 8px;
224
+ }
225
+ .tl-chip--lg.tl-chip--suffix:not(.tl-chip--prefix) {
226
+ padding: 0 8px 0 16px;
227
+ }
228
+ .tl-chip--lg.tl-chip--prefix.tl-chip--suffix {
229
+ padding: 0 8px;
230
+ }
231
+ .tl-chip--sm.tl-chip--prefix:not(.tl-chip--suffix) {
232
+ padding: 0 12px 0 6px;
233
+ }
234
+ .tl-chip--sm.tl-chip--suffix:not(.tl-chip--prefix) {
235
+ padding: 0 6px 0 12px;
236
+ }
237
+ .tl-chip--sm.tl-chip--prefix.tl-chip--suffix {
238
+ padding: 0 6px;
239
+ }