@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/tl-navigation-tabs.css ADDED
@@ -0,0 +1,287 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+ :root,
5
+ .tds-mode-light,
6
+ .scania .tds-mode-light,
7
+ .scania.tds-mode-light,
8
+ .scania .tl-mode-light,
9
+ .scania.tl-mode-light {
10
+ --component-tabs-background-primary: var(--color-background-base);
11
+ --component-tabs-background-secondary: var(--color-background-layer-01);
12
+ --component-tabs-background-folder-primary: var(--scania-color-transparent-invisible-light);
13
+ --component-tabs-background-folder-secondary: var(--scania-color-transparent-invisible-light);
14
+ --component-tabs-background-scroll-default: var(--scania-color-grey-200);
15
+ --component-tabs-background-item-primary-default: var(--scania-color-grey-100);
16
+ --component-tabs-background-item-primary-hover: var(--scania-color-grey-200);
17
+ --component-tabs-background-item-primary-current-default: var(--scania-color-grey-50);
18
+ --component-tabs-background-item-secondary-default: var(--scania-color-grey-100);
19
+ --component-tabs-background-item-secondary-hover: var(--scania-color-grey-200);
20
+ --component-tabs-background-item-secondary-current-default: var(--scania-color-base-white);
21
+ --component-tabs-border-default: var(--color-border-discrete);
22
+ --component-tabs-border-folder-default: var(--color-border-none);
23
+ --component-tabs-border-item-default: var(--color-border-none);
24
+ --component-tabs-border-item-hover: var(--scania-color-grey-850);
25
+ --component-tabs-border-item-divider-default: var(--color-border-discrete);
26
+ --component-tabs-border-item-indicator-default: var(--scania-color-blue-400);
27
+ --component-tabs-text-item-default: var(--color-text-soft);
28
+ --component-tabs-text-item-folder-default: var(--color-text-strong);
29
+ --component-tabs-text-item-current-default: var(--color-text-strong);
30
+ --component-tabs-opacity-disabled: var(--scania-opacity-25);
31
+ --component-tabs-icon-scroll-default: var(--color-icon-strong);
32
+ }
33
+
34
+ .traton .tds-mode-light,
35
+ .traton.tds-mode-light,
36
+ .traton .tl-mode-light,
37
+ .traton.tl-mode-light {
38
+ --component-tabs-background-primary: var(--color-background-base);
39
+ --component-tabs-background-secondary: var(--color-background-layer-01);
40
+ --component-tabs-background-folder-primary: var(--traton-color-transparent-invisible-light);
41
+ --component-tabs-background-folder-secondary: var(--traton-color-transparent-invisible-light);
42
+ --component-tabs-background-scroll-default: var(--traton-color-grey-300);
43
+ --component-tabs-background-item-primary-default: var(--traton-color-grey-200);
44
+ --component-tabs-background-item-primary-hover: var(--traton-color-grey-300);
45
+ --component-tabs-background-item-primary-current-default: var(--color-background-layer-01);
46
+ --component-tabs-background-item-secondary-default: var(--traton-color-grey-200);
47
+ --component-tabs-background-item-secondary-hover: var(--traton-color-grey-300);
48
+ --component-tabs-background-item-secondary-current-default: var(--color-background-layer-02);
49
+ --component-tabs-border-default: var(--color-border-discrete);
50
+ --component-tabs-border-folder-default: var(--color-border-none);
51
+ --component-tabs-border-item-default: var(--color-border-none);
52
+ --component-tabs-border-item-hover: var(--color-border-discrete);
53
+ --component-tabs-border-item-divider-default: var(--color-border-discrete);
54
+ --component-tabs-border-item-indicator-default: var(--traton-color-blue-500);
55
+ --component-tabs-text-item-default: var(--color-text-soft);
56
+ --component-tabs-text-item-folder-default: var(--color-text-strong);
57
+ --component-tabs-text-item-current-default: var(--color-text-strong);
58
+ --component-tabs-opacity-disabled: var(--traton-opacity-25);
59
+ --component-tabs-icon-scroll-default: var(--color-icon-strong);
60
+ }
61
+
62
+ .tds-mode-dark,
63
+ .scania .tds-mode-dark,
64
+ .scania.tds-mode-dark,
65
+ .scania .tl-mode-dark,
66
+ .scania.tl-mode-dark {
67
+ --component-tabs-background-primary: var(--color-background-base);
68
+ --component-tabs-background-secondary: var(--color-background-layer-01);
69
+ --component-tabs-background-folder-primary: var(--scania-color-transparent-invisible-dark);
70
+ --component-tabs-background-folder-secondary: var(--scania-color-transparent-invisible-dark);
71
+ --component-tabs-background-scroll-default: var(--scania-color-grey-750);
72
+ --component-tabs-background-item-primary-default: var(--scania-color-grey-800);
73
+ --component-tabs-background-item-primary-hover: var(--scania-color-grey-800);
74
+ --component-tabs-background-item-primary-current-default: var(--scania-color-grey-850);
75
+ --component-tabs-background-item-secondary-default: var(--scania-color-grey-750);
76
+ --component-tabs-background-item-secondary-hover: var(--scania-color-grey-800);
77
+ --component-tabs-background-item-secondary-current-default: var(--scania-color-grey-800);
78
+ --component-tabs-border-default: var(--color-border-discrete);
79
+ --component-tabs-border-folder-default: var(--color-border-none);
80
+ --component-tabs-border-item-default: var(--color-border-none);
81
+ --component-tabs-border-item-hover: var(--scania-color-grey-50);
82
+ --component-tabs-border-item-divider-default: var(--color-border-discrete);
83
+ --component-tabs-border-item-indicator-default: var(--scania-color-blue-300);
84
+ --component-tabs-text-item-default: var(--color-text-soft);
85
+ --component-tabs-text-item-folder-default: var(--color-text-strong);
86
+ --component-tabs-text-item-current-default: var(--color-text-strong);
87
+ --component-tabs-opacity-disabled: var(--scania-opacity-25);
88
+ --component-tabs-icon-scroll-default: var(--color-icon-strong);
89
+ }
90
+
91
+ .traton .tds-mode-dark,
92
+ .traton.tds-mode-dark,
93
+ .traton .tl-mode-dark,
94
+ .traton.tl-mode-dark {
95
+ --component-tabs-background-primary: var(--color-background-base);
96
+ --component-tabs-background-secondary: var(--color-background-layer-01);
97
+ --component-tabs-background-folder-primary: var(--traton-color-transparent-invisible-dark);
98
+ --component-tabs-background-folder-secondary: var(--traton-color-transparent-invisible-dark);
99
+ --component-tabs-background-scroll-default: var(--traton-color-blue-800);
100
+ --component-tabs-background-item-primary-default: var(--traton-color-blue-850);
101
+ --component-tabs-background-item-primary-hover: var(--traton-color-blue-800);
102
+ --component-tabs-background-item-primary-current-default: var(--color-background-layer-01);
103
+ --component-tabs-background-item-secondary-default: var(--traton-color-blue-850);
104
+ --component-tabs-background-item-secondary-hover: var(--traton-color-blue-800);
105
+ --component-tabs-background-item-secondary-current-default: var(--color-background-layer-02);
106
+ --component-tabs-border-default: var(--color-border-discrete);
107
+ --component-tabs-border-folder-default: var(--color-border-none);
108
+ --component-tabs-border-item-default: var(--color-border-none);
109
+ --component-tabs-border-item-hover: var(--color-border-discrete);
110
+ --component-tabs-border-item-divider-default: var(--color-border-discrete);
111
+ --component-tabs-border-item-indicator-default: var(--traton-color-yellow-400);
112
+ --component-tabs-text-item-default: var(--color-text-soft);
113
+ --component-tabs-text-item-folder-default: var(--color-text-strong);
114
+ --component-tabs-text-item-current-default: var(--color-text-strong);
115
+ --component-tabs-opacity-disabled: var(--traton-opacity-25);
116
+ --component-tabs-icon-scroll-default: var(--color-icon-strong);
117
+ }
118
+
119
+ .tl-navigation-tabs {
120
+ /* tds-navigation-tabs variables */
121
+ --navigation-tabs-horizontal-divider: var(--component-tabs-border-default);
122
+ --navigation-tabs-scroll-button-color: var(--component-tabs-icon-scroll-default);
123
+ --navigation-tabs-scroll-button-background: var(--component-tabs-background-primary);
124
+ }
125
+ .tl-navigation-tabs--primary {
126
+ --navigation-tabs-scroll-button-background: var(--component-tabs-background-primary);
127
+ }
128
+ .tl-navigation-tabs--secondary {
129
+ --navigation-tabs-scroll-button-background: var(--component-tabs-background-secondary);
130
+ }
131
+
132
+ .tl-navigation-tabs__tab {
133
+ /* tds-navigation-tab variables */
134
+ --navigation-tabs-tab-color: var(--component-tabs-text-item-default);
135
+ --navigation-tabs-tab-color-selected: var(--component-tabs-text-item-current-default);
136
+ --navigation-tabs-tab-opacity-disabled: calc(var(--component-tabs-opacity-disabled) / 100);
137
+ --navigation-tabs-tab-color-hover: var(--component-tabs-text-item-current-default);
138
+ --navigation-tabs-tab-indicator-hover: var(--component-tabs-border-item-hover);
139
+ --navigation-tabs-tab-indicator-active: var(--component-tabs-border-item-indicator-default);
140
+ }
141
+
142
+ /* Typography Usage mixins */
143
+ .tl-navigation-tabs__tab {
144
+ all: unset;
145
+ box-sizing: border-box;
146
+ }
147
+ .tl-navigation-tabs__tab * {
148
+ box-sizing: border-box;
149
+ }
150
+ .tl-navigation-tabs__tab {
151
+ font-family: var(--type-system-title-01-font-family);
152
+ font-size: calc(var(--type-system-title-01-font-size) * 1px);
153
+ line-height: calc(var(--type-system-title-01-line-height) * 1px);
154
+ font-weight: var(--type-system-title-01-font-weight);
155
+ letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
156
+ color: var(--navigation-tabs-tab-color);
157
+ text-decoration: none;
158
+ display: block;
159
+ position: relative;
160
+ transition: color 0.15s ease-in-out 0s;
161
+ white-space: nowrap;
162
+ background-color: transparent;
163
+ border: 0;
164
+ padding: 25px 8px;
165
+ }
166
+ .tl-navigation-tabs__tab:focus-visible {
167
+ outline: 2px solid var(--component--focus-ring-color-strong);
168
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
169
+ outline-offset: -2px;
170
+ z-index: 1;
171
+ outline-offset: -2px;
172
+ }
173
+ .tl-navigation-tabs__tab::after {
174
+ background-color: var(--navigation-tabs-tab-indicator-hover);
175
+ content: " ";
176
+ position: absolute;
177
+ bottom: 0;
178
+ right: 0;
179
+ left: 0;
180
+ margin-left: auto;
181
+ width: 0%;
182
+ margin-right: auto;
183
+ height: 2px;
184
+ z-index: 1;
185
+ transition: width 0.15s ease-in-out 0s;
186
+ }
187
+ .tl-navigation-tabs__tab:not(.tl-navigation-tabs__tab--selected)::after {
188
+ width: 0%;
189
+ }
190
+ .tl-navigation-tabs__tab:hover:not(.tl-navigation-tabs__tab--disabled, .tl-navigation-tabs__tab--selected) {
191
+ cursor: pointer;
192
+ color: var(--navigation-tabs-tab-color-hover);
193
+ }
194
+ .tl-navigation-tabs__tab:hover:not(.tl-navigation-tabs__tab--disabled, .tl-navigation-tabs__tab--selected)::after {
195
+ width: 100%;
196
+ }
197
+ .tl-navigation-tabs__tab--selected {
198
+ color: var(--navigation-tabs-tab-color-selected);
199
+ }
200
+ .tl-navigation-tabs__tab--selected::after {
201
+ background-color: var(--navigation-tabs-tab-indicator-active);
202
+ width: 100%;
203
+ }
204
+ .tl-navigation-tabs__tab--disabled {
205
+ opacity: var(--navigation-tabs-tab-opacity-disabled);
206
+ cursor: not-allowed;
207
+ user-select: none;
208
+ }
209
+ .tl-navigation-tabs__tab--disabled::after {
210
+ content: none;
211
+ }
212
+ .tl-navigation-tabs__tab--disabled:hover {
213
+ color: var(--navigation-tabs-tab-color);
214
+ }
215
+ .tl-navigation-tabs__tab--disabled:focus-visible::before {
216
+ outline: none;
217
+ box-shadow: none;
218
+ }
219
+
220
+ .tl-navigation-tabs {
221
+ box-sizing: border-box;
222
+ }
223
+ .tl-navigation-tabs * {
224
+ box-sizing: border-box;
225
+ }
226
+ .tl-navigation-tabs {
227
+ display: flex;
228
+ flex-wrap: nowrap;
229
+ white-space: nowrap;
230
+ width: 100%;
231
+ overflow-x: scroll;
232
+ scrollbar-width: none;
233
+ gap: 24px;
234
+ position: relative;
235
+ }
236
+ .tl-navigation-tabs::-webkit-scrollbar {
237
+ display: none;
238
+ }
239
+ .tl-navigation-tabs:focus-visible {
240
+ outline: 2px solid var(--component--focus-ring-color-strong);
241
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
242
+ outline-offset: 1px;
243
+ z-index: 1;
244
+ }
245
+ .tl-navigation-tabs::after {
246
+ border-bottom: 1px solid var(--navigation-tabs-horizontal-divider);
247
+ content: " ";
248
+ display: block;
249
+ left: 0;
250
+ right: 0;
251
+ bottom: 0;
252
+ position: absolute;
253
+ }
254
+
255
+ .tl-navigation-tabs__scroll-button {
256
+ background-color: var(--navigation-tabs-scroll-button-background);
257
+ color: var(--navigation-tabs-scroll-button-color);
258
+ cursor: pointer;
259
+ min-width: 48px;
260
+ border: 0;
261
+ display: block;
262
+ justify-content: center;
263
+ align-items: center;
264
+ opacity: 1;
265
+ position: sticky;
266
+ border-bottom: 1px solid var(--navigation-tabs-horizontal-divider);
267
+ }
268
+ .tl-navigation-tabs__scroll-button:focus-visible {
269
+ outline: 2px solid var(--component--focus-ring-color-strong);
270
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
271
+ outline-offset: -2px;
272
+ z-index: 1;
273
+ }
274
+
275
+ .tl-navigation-tabs__scroll-button--right {
276
+ right: 0;
277
+ z-index: 1;
278
+ }
279
+
280
+ .tl-navigation-tabs__scroll-button--left {
281
+ left: 0;
282
+ z-index: 1;
283
+ }
284
+
285
+ .tl-navigation-tabs__scroll-button svg {
286
+ fill: var(--navigation-tabs-scroll-button-color);
287
+ }