@scania/tegel-lite 1.4.0 → 1.5.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 (6) hide show
  1. package/dist/components.css +821 -0
  2. package/dist/tl-chip.css +239 -0
  3. package/dist/tl-folder-tabs.css +255 -0
  4. package/dist/tl-inline-tabs.css +276 -0
  5. package/dist/tl-navigation-tabs.css +287 -0
  6. package/package.json +5 -1
package/dist/tl-inline-tabs.css ADDED
@@ -0,0 +1,276 @@
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-inline-tabs {
120
+ /* Horizontal divider */
121
+ --inline-tabs-horizontal-divider: var(--component-tabs-border-default);
122
+ /* Scroll button */
123
+ --inline-tabs-scroll-button-color: var(--component-tabs-icon-scroll-default);
124
+ --inline-tabs-scroll-button-background: var(--component-tabs-background-primary);
125
+ }
126
+ .tl-inline-tabs--primary {
127
+ --inline-tabs-scroll-button-background: var(--component-tabs-background-primary);
128
+ }
129
+ .tl-inline-tabs--secondary {
130
+ --inline-tabs-scroll-button-background: var(--component-tabs-background-secondary);
131
+ }
132
+
133
+ .tl-inline-tabs__tab {
134
+ /* Tab */
135
+ --inline-tabs-tab-color: var(--component-tabs-text-item-default);
136
+ --inline-tabs-tab-color-selected: var(--component-tabs-text-item-current-default);
137
+ --inline-tabs-tab-opacity-disabled: calc(var(--component-tabs-opacity-disabled) / 100);
138
+ --inline-tabs-tab-color-hover: var(--component-tabs-text-item-current-default);
139
+ --inline-tabs-tab-indicator-active: var(--component-tabs-border-item-indicator-default);
140
+ --inline-tabs-tab-indicator-hover: var(--component-tabs-border-item-hover);
141
+ }
142
+
143
+ /* Typography Usage mixins */
144
+ .tl-inline-tabs__tab {
145
+ all: unset;
146
+ box-sizing: border-box;
147
+ }
148
+ .tl-inline-tabs__tab * {
149
+ box-sizing: border-box;
150
+ }
151
+ .tl-inline-tabs__tab {
152
+ font-family: var(--type-system-title-01-font-family);
153
+ font-size: calc(var(--type-system-title-01-font-size) * 1px);
154
+ line-height: calc(var(--type-system-title-01-line-height) * 1px);
155
+ font-weight: var(--type-system-title-01-font-weight);
156
+ letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
157
+ color: var(--inline-tabs-tab-color);
158
+ text-decoration: none;
159
+ display: block;
160
+ position: relative;
161
+ transition: color 0.15s ease-in-out 0s;
162
+ white-space: nowrap;
163
+ background-color: transparent;
164
+ border: 0;
165
+ padding: 20px 8px;
166
+ }
167
+ .tl-inline-tabs__tab:focus-visible {
168
+ outline: 2px solid var(--component--focus-ring-color-strong);
169
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
170
+ outline-offset: -2px;
171
+ z-index: 1;
172
+ outline-offset: -2px;
173
+ }
174
+ .tl-inline-tabs__tab::after {
175
+ background-color: var(--inline-tabs-tab-indicator-hover);
176
+ content: " ";
177
+ position: absolute;
178
+ bottom: 0;
179
+ right: 0;
180
+ left: 0;
181
+ margin-left: auto;
182
+ width: 0%;
183
+ margin-right: auto;
184
+ height: 2px;
185
+ z-index: 1;
186
+ transition: width 0.15s ease-in-out 0s;
187
+ }
188
+ .tl-inline-tabs__tab:not(.tl-inline-tabs__tab--selected)::after {
189
+ width: 0%;
190
+ }
191
+ .tl-inline-tabs__tab:hover:not(.tl-inline-tabs__tab--disabled, .tl-inline-tabs__tab--selected) {
192
+ cursor: pointer;
193
+ color: var(--inline-tabs-tab-color-hover);
194
+ }
195
+ .tl-inline-tabs__tab:hover:not(.tl-inline-tabs__tab--disabled, .tl-inline-tabs__tab--selected)::after {
196
+ width: 100%;
197
+ }
198
+ .tl-inline-tabs__tab--selected {
199
+ color: var(--inline-tabs-tab-color-selected);
200
+ }
201
+ .tl-inline-tabs__tab--selected::after {
202
+ background-color: var(--inline-tabs-tab-indicator-active);
203
+ width: 100%;
204
+ }
205
+ .tl-inline-tabs__tab--disabled {
206
+ opacity: var(--inline-tabs-tab-opacity-disabled);
207
+ cursor: not-allowed;
208
+ user-select: none;
209
+ }
210
+ .tl-inline-tabs__tab--disabled::after {
211
+ content: none;
212
+ }
213
+ .tl-inline-tabs__tab--disabled:focus-visible::before {
214
+ outline: none;
215
+ box-shadow: none;
216
+ }
217
+
218
+ .tl-inline-tabs {
219
+ box-sizing: border-box;
220
+ }
221
+ .tl-inline-tabs * {
222
+ box-sizing: border-box;
223
+ }
224
+ .tl-inline-tabs {
225
+ display: flex;
226
+ flex-wrap: nowrap;
227
+ white-space: nowrap;
228
+ width: 100%;
229
+ overflow-x: scroll;
230
+ scrollbar-width: none;
231
+ position: relative;
232
+ border-bottom: 1px solid var(--inline-tabs-horizontal-divider);
233
+ }
234
+ .tl-inline-tabs::-webkit-scrollbar {
235
+ display: none;
236
+ }
237
+ .tl-inline-tabs:focus-visible {
238
+ outline: 2px solid var(--component--focus-ring-color-strong);
239
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
240
+ outline-offset: 1px;
241
+ z-index: 1;
242
+ }
243
+
244
+ .tl-inline-tabs__scroll-button {
245
+ background-color: var(--inline-tabs-scroll-button-background);
246
+ color: var(--inline-tabs-scroll-button-color);
247
+ cursor: pointer;
248
+ min-width: 48px;
249
+ border: 0;
250
+ display: block;
251
+ justify-content: center;
252
+ align-items: center;
253
+ opacity: 1;
254
+ position: sticky;
255
+ }
256
+ .tl-inline-tabs__scroll-button:focus-visible {
257
+ outline: 2px solid var(--component--focus-ring-color-strong);
258
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
259
+ outline-offset: -2px;
260
+ z-index: 1;
261
+ outline-offset: -2px;
262
+ }
263
+
264
+ .tl-inline-tabs__scroll-button--right {
265
+ right: 0;
266
+ z-index: 1;
267
+ }
268
+
269
+ .tl-inline-tabs__scroll-button--left {
270
+ left: 0;
271
+ z-index: 1;
272
+ }
273
+
274
+ .tl-inline-tabs__scroll-button svg {
275
+ fill: var(--inline-tabs-scroll-button-color);
276
+ }
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
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "1.4.0",
3
+ "version": "1.5.0",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -34,14 +34,18 @@
34
34
  "./tl-button.css": "./dist/tl-button.css",
35
35
  "./tl-card.css": "./dist/tl-card.css",
36
36
  "./tl-checkbox.css": "./dist/tl-checkbox.css",
37
+ "./tl-chip.css": "./dist/tl-chip.css",
37
38
  "./tl-datetime.css": "./dist/tl-datetime.css",
38
39
  "./tl-divider.css": "./dist/tl-divider.css",
40
+ "./tl-folder-tabs.css": "./dist/tl-folder-tabs.css",
39
41
  "./tl-footer.css": "./dist/tl-footer.css",
40
42
  "./tl-header.css": "./dist/tl-header.css",
41
43
  "./tl-icon.css": "./dist/tl-icon.css",
44
+ "./tl-inline-tabs.css": "./dist/tl-inline-tabs.css",
42
45
  "./tl-link.css": "./dist/tl-link.css",
43
46
  "./tl-message.css": "./dist/tl-message.css",
44
47
  "./tl-modal.css": "./dist/tl-modal.css",
48
+ "./tl-navigation-tabs.css": "./dist/tl-navigation-tabs.css",
45
49
  "./tl-popover-canvas.css": "./dist/tl-popover-canvas.css",
46
50
  "./tl-popover-menu.css": "./dist/tl-popover-menu.css",
47
51
  "./tl-radio-button.css": "./dist/tl-radio-button.css",