@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-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
+ }
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
+ }