@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-folder-tabs.css ADDED
@@ -0,0 +1,255 @@
1
+ /* tl-folder-tabs.scss (overlay buttons, no JS) */
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-tabs-background-primary: var(--color-background-base);
12
+ --component-tabs-background-secondary: var(--color-background-layer-01);
13
+ --component-tabs-background-folder-primary: var(--scania-color-transparent-invisible-light);
14
+ --component-tabs-background-folder-secondary: var(--scania-color-transparent-invisible-light);
15
+ --component-tabs-background-scroll-default: var(--scania-color-grey-200);
16
+ --component-tabs-background-item-primary-default: var(--scania-color-grey-100);
17
+ --component-tabs-background-item-primary-hover: var(--scania-color-grey-200);
18
+ --component-tabs-background-item-primary-current-default: var(--scania-color-grey-50);
19
+ --component-tabs-background-item-secondary-default: var(--scania-color-grey-100);
20
+ --component-tabs-background-item-secondary-hover: var(--scania-color-grey-200);
21
+ --component-tabs-background-item-secondary-current-default: var(--scania-color-base-white);
22
+ --component-tabs-border-default: var(--color-border-discrete);
23
+ --component-tabs-border-folder-default: var(--color-border-none);
24
+ --component-tabs-border-item-default: var(--color-border-none);
25
+ --component-tabs-border-item-hover: var(--scania-color-grey-850);
26
+ --component-tabs-border-item-divider-default: var(--color-border-discrete);
27
+ --component-tabs-border-item-indicator-default: var(--scania-color-blue-400);
28
+ --component-tabs-text-item-default: var(--color-text-soft);
29
+ --component-tabs-text-item-folder-default: var(--color-text-strong);
30
+ --component-tabs-text-item-current-default: var(--color-text-strong);
31
+ --component-tabs-opacity-disabled: var(--scania-opacity-25);
32
+ --component-tabs-icon-scroll-default: var(--color-icon-strong);
33
+ }
34
+
35
+ .traton .tds-mode-light,
36
+ .traton.tds-mode-light,
37
+ .traton .tl-mode-light,
38
+ .traton.tl-mode-light {
39
+ --component-tabs-background-primary: var(--color-background-base);
40
+ --component-tabs-background-secondary: var(--color-background-layer-01);
41
+ --component-tabs-background-folder-primary: var(--traton-color-transparent-invisible-light);
42
+ --component-tabs-background-folder-secondary: var(--traton-color-transparent-invisible-light);
43
+ --component-tabs-background-scroll-default: var(--traton-color-grey-300);
44
+ --component-tabs-background-item-primary-default: var(--traton-color-grey-200);
45
+ --component-tabs-background-item-primary-hover: var(--traton-color-grey-300);
46
+ --component-tabs-background-item-primary-current-default: var(--color-background-layer-01);
47
+ --component-tabs-background-item-secondary-default: var(--traton-color-grey-200);
48
+ --component-tabs-background-item-secondary-hover: var(--traton-color-grey-300);
49
+ --component-tabs-background-item-secondary-current-default: var(--color-background-layer-02);
50
+ --component-tabs-border-default: var(--color-border-discrete);
51
+ --component-tabs-border-folder-default: var(--color-border-none);
52
+ --component-tabs-border-item-default: var(--color-border-none);
53
+ --component-tabs-border-item-hover: var(--color-border-discrete);
54
+ --component-tabs-border-item-divider-default: var(--color-border-discrete);
55
+ --component-tabs-border-item-indicator-default: var(--traton-color-blue-500);
56
+ --component-tabs-text-item-default: var(--color-text-soft);
57
+ --component-tabs-text-item-folder-default: var(--color-text-strong);
58
+ --component-tabs-text-item-current-default: var(--color-text-strong);
59
+ --component-tabs-opacity-disabled: var(--traton-opacity-25);
60
+ --component-tabs-icon-scroll-default: var(--color-icon-strong);
61
+ }
62
+
63
+ .tds-mode-dark,
64
+ .scania .tds-mode-dark,
65
+ .scania.tds-mode-dark,
66
+ .scania .tl-mode-dark,
67
+ .scania.tl-mode-dark {
68
+ --component-tabs-background-primary: var(--color-background-base);
69
+ --component-tabs-background-secondary: var(--color-background-layer-01);
70
+ --component-tabs-background-folder-primary: var(--scania-color-transparent-invisible-dark);
71
+ --component-tabs-background-folder-secondary: var(--scania-color-transparent-invisible-dark);
72
+ --component-tabs-background-scroll-default: var(--scania-color-grey-750);
73
+ --component-tabs-background-item-primary-default: var(--scania-color-grey-800);
74
+ --component-tabs-background-item-primary-hover: var(--scania-color-grey-800);
75
+ --component-tabs-background-item-primary-current-default: var(--scania-color-grey-850);
76
+ --component-tabs-background-item-secondary-default: var(--scania-color-grey-750);
77
+ --component-tabs-background-item-secondary-hover: var(--scania-color-grey-800);
78
+ --component-tabs-background-item-secondary-current-default: var(--scania-color-grey-800);
79
+ --component-tabs-border-default: var(--color-border-discrete);
80
+ --component-tabs-border-folder-default: var(--color-border-none);
81
+ --component-tabs-border-item-default: var(--color-border-none);
82
+ --component-tabs-border-item-hover: var(--scania-color-grey-50);
83
+ --component-tabs-border-item-divider-default: var(--color-border-discrete);
84
+ --component-tabs-border-item-indicator-default: var(--scania-color-blue-300);
85
+ --component-tabs-text-item-default: var(--color-text-soft);
86
+ --component-tabs-text-item-folder-default: var(--color-text-strong);
87
+ --component-tabs-text-item-current-default: var(--color-text-strong);
88
+ --component-tabs-opacity-disabled: var(--scania-opacity-25);
89
+ --component-tabs-icon-scroll-default: var(--color-icon-strong);
90
+ }
91
+
92
+ .traton .tds-mode-dark,
93
+ .traton.tds-mode-dark,
94
+ .traton .tl-mode-dark,
95
+ .traton.tl-mode-dark {
96
+ --component-tabs-background-primary: var(--color-background-base);
97
+ --component-tabs-background-secondary: var(--color-background-layer-01);
98
+ --component-tabs-background-folder-primary: var(--traton-color-transparent-invisible-dark);
99
+ --component-tabs-background-folder-secondary: var(--traton-color-transparent-invisible-dark);
100
+ --component-tabs-background-scroll-default: var(--traton-color-blue-800);
101
+ --component-tabs-background-item-primary-default: var(--traton-color-blue-850);
102
+ --component-tabs-background-item-primary-hover: var(--traton-color-blue-800);
103
+ --component-tabs-background-item-primary-current-default: var(--color-background-layer-01);
104
+ --component-tabs-background-item-secondary-default: var(--traton-color-blue-850);
105
+ --component-tabs-background-item-secondary-hover: var(--traton-color-blue-800);
106
+ --component-tabs-background-item-secondary-current-default: var(--color-background-layer-02);
107
+ --component-tabs-border-default: var(--color-border-discrete);
108
+ --component-tabs-border-folder-default: var(--color-border-none);
109
+ --component-tabs-border-item-default: var(--color-border-none);
110
+ --component-tabs-border-item-hover: var(--color-border-discrete);
111
+ --component-tabs-border-item-divider-default: var(--color-border-discrete);
112
+ --component-tabs-border-item-indicator-default: var(--traton-color-yellow-400);
113
+ --component-tabs-text-item-default: var(--color-text-soft);
114
+ --component-tabs-text-item-folder-default: var(--color-text-strong);
115
+ --component-tabs-text-item-current-default: var(--color-text-strong);
116
+ --component-tabs-opacity-disabled: var(--traton-opacity-25);
117
+ --component-tabs-icon-scroll-default: var(--color-icon-strong);
118
+ }
119
+
120
+ .tl-folder-tabs {
121
+ --folder-tabs-scroll-button-background: var(--component-tabs-background-scroll-default);
122
+ --folder-tabs-scroll-button-color: var(--component-tabs-icon-scroll-default);
123
+ }
124
+
125
+ .tl-folder-tabs__tab {
126
+ --folder-tab-background: var(--component-tabs-background-item-primary-default);
127
+ --folder-tab-background-hover: var(--component-tabs-background-item-primary-hover);
128
+ --folder-tab-background-selected: var(--component-tabs-background-item-primary-current-default);
129
+ --folder-tab-border-selected: var(--component-tabs-border-item-indicator-default);
130
+ --folder-tab-divider-color: var(--component-tabs-border-item-divider-default);
131
+ --folder-tab-text: var(--component-tabs-text-item-folder-default);
132
+ --folder-tab-text-selected: var(--component-tabs-text-item-current-default);
133
+ --folder-tab-item-opacity-disabled: calc(var(--component-tabs-opacity-disabled) / 100);
134
+ }
135
+
136
+ .tl-folder-tabs--primary .tl-folder-tabs__tab {
137
+ --folder-tab-background: var(--component-tabs-background-item-primary-default);
138
+ --folder-tab-background-hover: var(--component-tabs-background-item-primary-hover);
139
+ --folder-tab-background-selected: var(--component-tabs-background-item-primary-current-default);
140
+ }
141
+
142
+ .tl-folder-tabs--secondary .tl-folder-tabs__tab {
143
+ --folder-tab-background: var(--component-tabs-background-item-secondary-default);
144
+ --folder-tab-background-hover: var(--component-tabs-background-item-secondary-hover);
145
+ --folder-tab-background-selected: var(--component-tabs-background-item-secondary-current-default);
146
+ }
147
+
148
+ /* tl-folder-tabs.scss (overlay buttons, no JS) */
149
+ /* Typography Usage mixins */
150
+ .tl-folder-tabs__tab {
151
+ all: unset;
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
+ box-sizing: border-box;
158
+ position: relative;
159
+ display: inline-flex;
160
+ align-items: center;
161
+ min-inline-size: 142px;
162
+ inline-size: auto;
163
+ flex: 0 0 auto;
164
+ white-space: nowrap;
165
+ padding: 16px;
166
+ text-align: left;
167
+ cursor: pointer;
168
+ border-left: 1px solid transparent;
169
+ border-top: 2px solid transparent;
170
+ background-color: var(--folder-tab-background);
171
+ color: var(--folder-tab-text);
172
+ }
173
+ .tl-folder-tabs__tab + .tl-folder-tabs__tab {
174
+ border-left: 1px solid var(--folder-tab-divider-color);
175
+ }
176
+ .tl-folder-tabs__tab:focus-visible {
177
+ outline: 2px solid var(--component--focus-ring-color-strong);
178
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
179
+ outline-offset: -2px;
180
+ z-index: 1;
181
+ box-shadow: inset -0.5px -1px 0 3px var(--component--focus-ring-color-discrete);
182
+ }
183
+ .tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled, .tl-folder-tabs__tab--selected) {
184
+ background-color: var(--folder-tab-background-hover);
185
+ }
186
+ .tl-folder-tabs__tab--selected {
187
+ background-color: var(--folder-tab-background-selected);
188
+ border-top: 2px solid var(--folder-tab-border-selected);
189
+ color: var(--folder-tab-text-selected);
190
+ }
191
+ .tl-folder-tabs__tab--disabled {
192
+ opacity: var(--folder-tab-item-opacity-disabled);
193
+ cursor: not-allowed;
194
+ user-select: none;
195
+ }
196
+ .tl-folder-tabs__tab--disabled:focus-visible {
197
+ outline: none;
198
+ box-shadow: none;
199
+ }
200
+
201
+ .tl-folder-tabs {
202
+ box-sizing: border-box;
203
+ }
204
+ .tl-folder-tabs * {
205
+ box-sizing: border-box;
206
+ }
207
+ .tl-folder-tabs {
208
+ display: flex;
209
+ overflow-x: scroll;
210
+ scrollbar-width: none;
211
+ position: relative;
212
+ outline: 0;
213
+ }
214
+ .tl-folder-tabs::-webkit-scrollbar {
215
+ display: none;
216
+ }
217
+ .tl-folder-tabs:focus-visible {
218
+ outline: 2px solid var(--component--focus-ring-color-strong);
219
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
220
+ outline-offset: 1px;
221
+ z-index: 1;
222
+ }
223
+
224
+ /* Overlay buttons (optional in markup; visible via media query) */
225
+ .tl-folder-tabs__scroll-button {
226
+ background-color: var(--folder-tabs-scroll-button-background);
227
+ color: var(--folder-tabs-scroll-button-color);
228
+ min-width: 48px;
229
+ border: 0;
230
+ justify-content: center;
231
+ align-items: center;
232
+ position: sticky;
233
+ cursor: pointer;
234
+ }
235
+ .tl-folder-tabs__scroll-button:focus-visible {
236
+ outline: 2px solid var(--component--focus-ring-color-strong);
237
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
238
+ outline-offset: -2px;
239
+ z-index: 1;
240
+ }
241
+
242
+ /* left/right anchoring over the track */
243
+ .tl-folder-tabs__scroll-button--left {
244
+ left: 0;
245
+ z-index: 1;
246
+ }
247
+
248
+ .tl-folder-tabs__scroll-button--right {
249
+ right: 0;
250
+ z-index: 1;
251
+ }
252
+
253
+ .tl-folder-tabs__scroll-button svg {
254
+ fill: var(--folder-tabs-scroll-button-color);
255
+ }
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
+ }