@nuralyui/tabs 0.0.12 → 0.0.15
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.
- package/bundle.js +779 -0
- package/index.d.ts +7 -0
- package/index.js +8 -0
- package/index.js.map +1 -1
- package/package.json +31 -3
- package/react.d.ts +48 -7
- package/react.js +43 -9
- package/react.js.map +1 -1
- package/tabs.component.d.ts +60 -27
- package/tabs.component.js +225 -158
- package/tabs.component.js.map +1 -1
- package/tabs.constant.d.ts +18 -24
- package/tabs.constant.js +20 -22
- package/tabs.constant.js.map +1 -1
- package/tabs.style.d.ts +7 -0
- package/tabs.style.js +282 -149
- package/tabs.style.js.map +1 -1
- package/tabs.types.d.ts +141 -0
- package/tabs.types.js +13 -0
- package/tabs.types.js.map +1 -0
- package/demo/tabs-demo.d.ts +0 -32
- package/demo/tabs-demo.d.ts.map +0 -1
- package/demo/tabs-demo.js +0 -263
- package/demo/tabs-demo.js.map +0 -1
- package/index.d.ts.map +0 -1
- package/react.d.ts.map +0 -1
- package/tabs.component.d.ts.map +0 -1
- package/tabs.constant.d.ts.map +0 -1
- package/tabs.style.d.ts.map +0 -1
- package/templates/add-tab.template.d.ts +0 -2
- package/templates/add-tab.template.d.ts.map +0 -1
- package/templates/add-tab.template.js +0 -13
- package/templates/add-tab.template.js.map +0 -1
package/tabs.style.d.ts
CHANGED
|
@@ -1,2 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tabs component styles for the Hybrid UI Library
|
|
3
|
+
* Using shared CSS variables from /src/shared/themes/
|
|
4
|
+
*
|
|
5
|
+
* This file contains all the styling for the nr-tabs component with
|
|
6
|
+
* clean CSS variable usage without local fallbacks and proper theme switching support.
|
|
7
|
+
*/
|
|
1
8
|
export declare const styles: import("lit").CSSResult;
|
|
2
9
|
//# sourceMappingURL=tabs.style.d.ts.map
|
package/tabs.style.js
CHANGED
|
@@ -1,199 +1,332 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* Tabs component styles for the Hybrid UI Library
|
|
4
|
+
* Using shared CSS variables from /src/shared/themes/
|
|
5
|
+
*
|
|
6
|
+
* This file contains all the styling for the nr-tabs component with
|
|
7
|
+
* clean CSS variable usage without local fallbacks and proper theme switching support.
|
|
8
|
+
*/
|
|
2
9
|
export const styles = css `
|
|
3
|
-
:host{
|
|
10
|
+
:host {
|
|
4
11
|
display: block;
|
|
5
12
|
height: 100%;
|
|
13
|
+
|
|
14
|
+
/* Force CSS custom property inheritance to ensure theme switching works properly */
|
|
15
|
+
color: var(--nuraly-color-text);
|
|
16
|
+
background-color: var(--nuraly-color-background);
|
|
17
|
+
|
|
18
|
+
/* Minimal transitions for better performance */
|
|
19
|
+
|
|
6
20
|
}
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
.tab-labels,
|
|
13
|
-
.tabs-container {
|
|
14
|
-
display: flex;
|
|
21
|
+
|
|
22
|
+
/* Force re-evaluation of theme-dependent properties on theme change */
|
|
23
|
+
:host([data-theme]) {
|
|
24
|
+
color: inherit;
|
|
25
|
+
background-color: inherit;
|
|
15
26
|
}
|
|
16
27
|
|
|
17
28
|
.tabs-container {
|
|
18
|
-
|
|
29
|
+
display: flex;
|
|
30
|
+
height: 100%;
|
|
31
|
+
background-color: var(--nuraly-color-background);
|
|
32
|
+
border-radius: var(--nuraly-border-radius-tabs, var(--nuraly-border-radius-medium, 0));
|
|
33
|
+
box-shadow: var(--nuraly-shadow-tabs);
|
|
19
34
|
}
|
|
20
35
|
|
|
21
|
-
.
|
|
22
|
-
|
|
36
|
+
.tab-labels {
|
|
37
|
+
display: flex;
|
|
38
|
+
background-color: var(--nuraly-color-tabs-header-background);
|
|
39
|
+
border: var(--nuraly-border-tabs-header);
|
|
23
40
|
}
|
|
24
|
-
|
|
25
|
-
|
|
41
|
+
|
|
42
|
+
/* Tab label base styles */
|
|
43
|
+
.tab-label {
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
justify-content: center;
|
|
47
|
+
gap: var(--nuraly-spacing-2);
|
|
48
|
+
position: relative;
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
padding: var(--nuraly-spacing-tabs-padding, var(--nuraly-spacing-3) var(--nuraly-spacing-4));
|
|
51
|
+
border: var(--nuraly-border-tabs-label);
|
|
52
|
+
border-bottom: var(--nuraly-border-width-medium, 2px) solid transparent;
|
|
53
|
+
background-color: var(--nuraly-color-tabs-label-background);
|
|
54
|
+
color: var(--nuraly-color-tabs-label-text);
|
|
55
|
+
font-family: var(--nuraly-font-family);
|
|
56
|
+
font-size: var(--nuraly-font-size-body);
|
|
57
|
+
font-weight: var(--nuraly-font-weight-regular);
|
|
58
|
+
user-select: none;
|
|
59
|
+
white-space: nowrap;
|
|
60
|
+
|
|
61
|
+
&:hover {
|
|
62
|
+
color: var(--nuraly-color-tabs-label-text-hover);
|
|
63
|
+
background-color: var(--nuraly-color-tabs-label-background-hover);
|
|
64
|
+
border-color: var(--nuraly-color-tabs-label-border-hover);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&:focus {
|
|
68
|
+
outline: var(--nuraly-focus-outline);
|
|
69
|
+
outline-offset: var(--nuraly-focus-outline-offset);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&.active {
|
|
73
|
+
color: var(--nuraly-color-tabs-label-text-active);
|
|
74
|
+
background-color: var(--nuraly-color-tabs-label-background-active);
|
|
75
|
+
border-color: var(--nuraly-color-tabs-label-border-active);
|
|
76
|
+
font-weight: var(--nuraly-font-weight-semibold);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Positioning-specific border radius for horizontal tabs */
|
|
80
|
+
&.first-tab {
|
|
81
|
+
border-radius: var(--nuraly-border-radius-tabs-first);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&.middle-tab {
|
|
85
|
+
border-radius: var(--nuraly-border-radius-tabs-middle);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
&.last-tab {
|
|
89
|
+
border-radius: var(--nuraly-border-radius-tabs-last);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&.single-tab {
|
|
93
|
+
border-radius: var(--nuraly-border-radius-tabs-single);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&.disabled {
|
|
97
|
+
cursor: not-allowed;
|
|
98
|
+
color: var(--nuraly-color-text-disabled);
|
|
99
|
+
background-color: var(--nuraly-color-background-disabled);
|
|
100
|
+
|
|
101
|
+
&:hover {
|
|
102
|
+
color: var(--nuraly-color-text-disabled);
|
|
103
|
+
background-color: var(--nuraly-color-background-disabled);
|
|
104
|
+
border-color: transparent;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
26
107
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
108
|
+
|
|
109
|
+
/* Tab icon styling */
|
|
110
|
+
.tab-icon {
|
|
111
|
+
flex-shrink: 0;
|
|
112
|
+
width: var(--nuraly-tabs-icon-size, 1rem);
|
|
113
|
+
height: var(--nuraly-tabs-icon-size, 1rem);
|
|
114
|
+
color: inherit;
|
|
30
115
|
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
116
|
+
|
|
117
|
+
/* Tab text styling */
|
|
118
|
+
.tab-text {
|
|
119
|
+
flex: 1;
|
|
120
|
+
color: inherit;
|
|
121
|
+
|
|
122
|
+
&[contenteditable="true"] {
|
|
123
|
+
cursor: text;
|
|
124
|
+
outline: none;
|
|
125
|
+
|
|
126
|
+
&:focus {
|
|
127
|
+
background-color: var(--nuraly-color-tabs-edit-background);
|
|
128
|
+
border-radius: var(--nuraly-border-radius-small);
|
|
129
|
+
padding: var(--nuraly-spacing-1);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
34
132
|
}
|
|
35
133
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
134
|
+
/* Close/delete icon styling */
|
|
135
|
+
.close-icon {
|
|
136
|
+
flex-shrink: 0;
|
|
137
|
+
width: var(--nuraly-tabs-close-icon-size, 0.875rem);
|
|
138
|
+
height: var(--nuraly-tabs-close-icon-size, 0.875rem);
|
|
139
|
+
color: var(--nuraly-color-tabs-close-icon);
|
|
140
|
+
cursor: pointer;
|
|
141
|
+
padding: var(--nuraly-spacing-1);
|
|
142
|
+
border-radius: var(--nuraly-border-radius-small);
|
|
143
|
+
|
|
144
|
+
&:hover {
|
|
145
|
+
color: var(--nuraly-color-tabs-close-icon-hover);
|
|
146
|
+
background-color: var(--nuraly-color-tabs-close-icon-background-hover);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
&:active {
|
|
150
|
+
color: var(--nuraly-color-tabs-close-icon-active);
|
|
151
|
+
background-color: var(--nuraly-color-tabs-close-icon-background-active);
|
|
152
|
+
}
|
|
43
153
|
}
|
|
44
154
|
|
|
45
|
-
|
|
46
|
-
|
|
155
|
+
/* Add tab button styling */
|
|
156
|
+
.add-tab-label {
|
|
157
|
+
min-width: auto;
|
|
158
|
+
width: var(--nuraly-tabs-add-button-size, 2.5rem);
|
|
159
|
+
color: var(--nuraly-color-tabs-add-icon);
|
|
160
|
+
|
|
161
|
+
&:hover {
|
|
162
|
+
color: var(--nuraly-color-tabs-add-icon-hover);
|
|
163
|
+
background-color: var(--nuraly-color-tabs-add-background-hover);
|
|
164
|
+
}
|
|
47
165
|
}
|
|
48
166
|
|
|
49
|
-
.tab-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
167
|
+
.add-tab-icon {
|
|
168
|
+
width: var(--nuraly-tabs-add-icon-size, 1rem);
|
|
169
|
+
height: var(--nuraly-tabs-add-icon-size, 1rem);
|
|
170
|
+
color: inherit;
|
|
53
171
|
}
|
|
54
172
|
|
|
173
|
+
/* Tab content area */
|
|
55
174
|
.tab-content {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
border-top: var(--
|
|
61
|
-
|
|
62
|
-
overflow-
|
|
63
|
-
|
|
175
|
+
flex: 1;
|
|
176
|
+
padding: var(--nuraly-spacing-tabs-content-padding, var(--nuraly-spacing-4));
|
|
177
|
+
background-color: var(--nuraly-color-tabs-content-background);
|
|
178
|
+
border: var(--nuraly-border-tabs-content);
|
|
179
|
+
border-top: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);
|
|
180
|
+
overflow-y: auto;
|
|
181
|
+
overflow-x: hidden;
|
|
182
|
+
max-height: 100vh;
|
|
64
183
|
}
|
|
184
|
+
|
|
185
|
+
/* Orientation specific styles */
|
|
186
|
+
.vertical-align {
|
|
187
|
+
flex-direction: row;
|
|
188
|
+
|
|
189
|
+
.tab-labels {
|
|
190
|
+
flex-direction: column;
|
|
191
|
+
min-width: var(--nuraly-tabs-vertical-width, 12rem);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.tab-content {
|
|
195
|
+
border-top: none;
|
|
196
|
+
border-left: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.tab-label {
|
|
200
|
+
border-bottom: var(--nuraly-border-tabs-label);
|
|
201
|
+
border-right: var(--nuraly-border-width-medium, 2px) solid transparent;
|
|
202
|
+
|
|
203
|
+
&:hover,
|
|
204
|
+
&.active {
|
|
205
|
+
border-right-color: var(--nuraly-color-tabs-label-border-active);
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.vertical-align.right-align {
|
|
211
|
+
flex-direction: row-reverse;
|
|
212
|
+
|
|
213
|
+
.tab-content {
|
|
214
|
+
border-left: none;
|
|
215
|
+
border-right: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.tab-label {
|
|
219
|
+
border-right: var(--nuraly-border-tabs-label);
|
|
220
|
+
border-left: var(--nuraly-border-width-medium, 2px) solid transparent;
|
|
221
|
+
|
|
222
|
+
&:hover,
|
|
223
|
+
&.active {
|
|
224
|
+
border-left-color: var(--nuraly-color-tabs-label-border-active);
|
|
225
|
+
border-right-color: transparent;
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/* Alignment specific styles */
|
|
65
231
|
.right-align > .tab-labels {
|
|
66
|
-
flex-direction:
|
|
67
|
-
align-self:
|
|
232
|
+
flex-direction: row-reverse;
|
|
233
|
+
align-self: flex-end;
|
|
68
234
|
}
|
|
69
235
|
|
|
70
236
|
.center-align > .tab-labels {
|
|
71
|
-
align-self:
|
|
72
|
-
}
|
|
73
|
-
.vertical-align {
|
|
74
|
-
flex-direction: var(--hybrid-tabs-vertical-align-flex-direction);
|
|
237
|
+
align-self: center;
|
|
75
238
|
}
|
|
239
|
+
|
|
76
240
|
.horizontal-align {
|
|
77
|
-
flex-direction:
|
|
241
|
+
flex-direction: column;
|
|
78
242
|
}
|
|
79
243
|
|
|
80
|
-
|
|
81
|
-
|
|
244
|
+
/* Size variations */
|
|
245
|
+
:host([data-size="small"]) {
|
|
246
|
+
.tab-label {
|
|
247
|
+
padding: var(--nuraly-spacing-2) var(--nuraly-spacing-3);
|
|
248
|
+
font-size: var(--nuraly-font-size-small);
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.tab-content {
|
|
252
|
+
padding: var(--nuraly-spacing-3);
|
|
253
|
+
}
|
|
82
254
|
}
|
|
83
255
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
256
|
+
:host([data-size="large"]) {
|
|
257
|
+
.tab-label {
|
|
258
|
+
padding: var(--nuraly-spacing-4) var(--nuraly-spacing-6);
|
|
259
|
+
font-size: var(--nuraly-font-size-large);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.tab-content {
|
|
263
|
+
padding: var(--nuraly-spacing-6);
|
|
264
|
+
}
|
|
88
265
|
}
|
|
89
266
|
|
|
90
|
-
|
|
91
|
-
|
|
267
|
+
/* Type variations */
|
|
268
|
+
:host([data-type="card"]) {
|
|
269
|
+
.tab-label {
|
|
270
|
+
border: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);
|
|
271
|
+
border-radius: var(--nuraly-border-radius-medium);
|
|
272
|
+
margin: 0 var(--nuraly-spacing-1);
|
|
273
|
+
|
|
274
|
+
&.active {
|
|
275
|
+
background-color: var(--nuraly-color-primary);
|
|
276
|
+
color: var(--nuraly-color-primary-text);
|
|
277
|
+
border-color: var(--nuraly-color-primary);
|
|
278
|
+
}
|
|
279
|
+
}
|
|
92
280
|
}
|
|
93
281
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
282
|
+
:host([data-type="bordered"]) {
|
|
283
|
+
.tabs-container {
|
|
284
|
+
border: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);
|
|
285
|
+
border-radius: var(--nuraly-border-radius-medium);
|
|
286
|
+
}
|
|
97
287
|
}
|
|
98
288
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
289
|
+
/* Drag and drop states */
|
|
290
|
+
.tab-label.dragging-start {
|
|
291
|
+
opacity: 0.7;
|
|
292
|
+
border: var(--nuraly-border-width-thin, 1px) dashed var(--nuraly-color-border-strong);
|
|
293
|
+
background-color: var(--nuraly-color-background-hover);
|
|
102
294
|
}
|
|
103
295
|
|
|
104
|
-
.
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
border-color: var(--hybrid-tabs-vertical-align-label-border-color-active);
|
|
296
|
+
.tab-label.dragging {
|
|
297
|
+
border: var(--nuraly-border-width-thin, 1px) dashed var(--nuraly-color-primary);
|
|
298
|
+
background-color: var(--nuraly-color-primary-background);
|
|
299
|
+
opacity: 0.8;
|
|
109
300
|
}
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
301
|
+
|
|
302
|
+
/* Minimal animation support for better performance */
|
|
303
|
+
|
|
304
|
+
@keyframes fadeIn {
|
|
305
|
+
from {
|
|
306
|
+
opacity: 0;
|
|
307
|
+
transform: translateY(var(--nuraly-spacing-2));
|
|
308
|
+
}
|
|
309
|
+
to {
|
|
310
|
+
opacity: 1;
|
|
311
|
+
transform: translateY(0);
|
|
312
|
+
}
|
|
115
313
|
}
|
|
116
314
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
315
|
+
/* Accessibility improvements */
|
|
316
|
+
@media (prefers-reduced-motion: reduce) {
|
|
317
|
+
* {
|
|
318
|
+
transition: none !important;
|
|
319
|
+
animation: none !important;
|
|
320
|
+
}
|
|
121
321
|
}
|
|
122
322
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
323
|
+
/* Focus management for keyboard navigation */
|
|
324
|
+
.tab-label[tabindex="0"] {
|
|
325
|
+
position: relative;
|
|
126
326
|
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
color: #464646 !important;
|
|
131
|
-
}
|
|
132
|
-
.tab-label.active {
|
|
133
|
-
color: var(--hybrid-tabs-label-active);
|
|
134
|
-
background-color: var(--hybrid-tabs-label-active-background-color); /* Added background color */
|
|
135
|
-
}
|
|
136
|
-
.add-tab-icon{
|
|
137
|
-
--hybrid-icon-color:var(--hybrid-tabs-add-icon-color);
|
|
138
|
-
}
|
|
139
|
-
:host{
|
|
140
|
-
--hybrid-tabs-container-background-local-color:#ffffff;
|
|
141
|
-
--hybrid-tabs-border-radius-local:0px;
|
|
142
|
-
--hybrid-tabs-container-box-shadow:none;
|
|
143
|
-
--hybrid-tabs-dragging-start-border:1px dashed black;
|
|
144
|
-
--hybrid-tabs-dragging-enter-background-color:#1661b1;
|
|
145
|
-
--hybrid-tabs-va-enter-border: none;
|
|
146
|
-
--hybrid-tabs-va-enter-border-left: 1px solid #ccc;
|
|
147
|
-
--hybrid-tabs-va-ra-border:none;
|
|
148
|
-
--hybrid-tabs-va-ra-border-right:1px solid #ccc;
|
|
149
|
-
--hybrid-tabs-label-cursor:pointer;
|
|
150
|
-
--hybrid-tabs-label-padding: 3px 7px 5px 7px;
|
|
151
|
-
--hybrid-tabs-label-border-bottom: 2px solid transparent;
|
|
152
|
-
--hybrid-tabs-label-transition: border-color 0.1s ease;
|
|
153
|
-
--hybrid-tabs-label-user-select: none;
|
|
154
|
-
--hybrid-tabs-label-hover-color: #1661b1;
|
|
155
|
-
--hybrid-tabs-label-active-hover-color:#006afe;
|
|
156
|
-
--hybrid-tabs-content-padding:5px;
|
|
157
|
-
--hybrid-tabs-content-background-color-local: #fff;
|
|
158
|
-
--hybrid-tabs-content-border-top: 1px solid #ccc;
|
|
159
|
-
--hybrid-tabs-right-align-labels-flex-direction:row-reverse;
|
|
160
|
-
--hybrid-tabs-right-align-labels-align-self: end;
|
|
161
|
-
--hybrid-tabs-center-align-labels-align-self:center;
|
|
162
|
-
--hybrid-tabs-vertical-align-flex-direction:row;
|
|
163
|
-
--hybrid-tabs-halign-flex-direction:column;
|
|
164
|
-
--hybrid-tabs-valign-right-align-flex-direction:row-reverse;
|
|
165
|
-
--hybrid-tabs-label-active-border-bottom:2px solid transparent;
|
|
166
|
-
--hybrid-tabs-label-active-border-color: rgb(0, 106, 254);
|
|
167
|
-
--hybrid-tabs-label-active-hover-color: #006afe;
|
|
168
|
-
--hybrid-tabs-vertical-align-label-border: #006afe;
|
|
169
|
-
--hybrid-tabs-vertical-align-label-border-right: 2px solid transparent;
|
|
170
|
-
--hybrid-tabs-valign-ralign-label-border: none;
|
|
171
|
-
--hybrid-tabs-valign-ralign-label-border-left: 2px solid transparent;
|
|
172
|
-
--hybrid-tabs-vertical-align-label-border-active: none;
|
|
173
|
-
--hybrid-tabs-vertical-align-label-border-right-active: 2px solid transparent;
|
|
174
|
-
--hybrid-tabs-vertical-align-label-border-color-active: rgb(0, 106, 254);
|
|
175
|
-
--hybrid-tabs-valign-ralign-label-border-active: none;
|
|
176
|
-
--hybrid-tabs-valign-ralign-label-border-left-active: 2px solid transparent;
|
|
177
|
-
--hybrid-tabs-valign-ralign-label-border-color-active: rgb(0, 106, 254);
|
|
178
|
-
--hybrid-tabs-add-icon-font-size: 13px;
|
|
179
|
-
--hybrid-tabs-add-icon-margin-left: 5px;
|
|
180
|
-
--hybrid-tabs-add-label-font-size: 13px;
|
|
181
|
-
--hybrid-tabs-add-label-text-align: center;
|
|
182
|
-
--hybrid-tabs-dragging-border: 1px dashed gray;
|
|
183
|
-
--hybrid-tabs-label-active: #000000;
|
|
184
|
-
--hybrid-tabs-label-color:gray;
|
|
185
|
-
--hybrid-tabs-add-icon-color: #000000;
|
|
186
|
-
--hybrid-tabs-label-active-background-color: transparent; /* Added variable */
|
|
187
|
-
}
|
|
188
|
-
@media (prefers-color-scheme: dark) {
|
|
189
|
-
:host{
|
|
190
|
-
--hybrid-tabs-container-background-local-color: #3e3e3e;
|
|
191
|
-
--hybrid-tabs-content-background-color-local: #2d2d2d;
|
|
192
|
-
--hybrid-tabs-label-hover-color: #aaa;
|
|
193
|
-
--hybrid-tabs-label-active:#ffffff;
|
|
194
|
-
--hybrid-tabs-add-icon-color: #ffffff;
|
|
195
|
-
--hybrid-tabs-label-active-background-color: #2d2d2d; /* Dark mode background */
|
|
196
|
-
}
|
|
327
|
+
|
|
328
|
+
.tab-label:focus-visible {
|
|
329
|
+
z-index: 1;
|
|
197
330
|
}
|
|
198
331
|
`;
|
|
199
332
|
//# sourceMappingURL=tabs.style.js.map
|
package/tabs.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.style.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.style.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"tabs.style.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkUxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Tabs component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-tabs component with\n * clean CSS variable usage without local fallbacks and proper theme switching support.\n */\nexport const styles = css`\n :host {\n display: block;\n height: 100%;\n \n /* Force CSS custom property inheritance to ensure theme switching works properly */\n color: var(--nuraly-color-text);\n background-color: var(--nuraly-color-background);\n \n /* Minimal transitions for better performance */\n \n }\n\n /* Force re-evaluation of theme-dependent properties on theme change */\n :host([data-theme]) {\n color: inherit;\n background-color: inherit;\n }\n\n .tabs-container {\n display: flex;\n height: 100%;\n background-color: var(--nuraly-color-background);\n border-radius: var(--nuraly-border-radius-tabs, var(--nuraly-border-radius-medium, 0));\n box-shadow: var(--nuraly-shadow-tabs);\n }\n\n .tab-labels {\n display: flex;\n background-color: var(--nuraly-color-tabs-header-background);\n border: var(--nuraly-border-tabs-header);\n }\n\n /* Tab label base styles */\n .tab-label {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--nuraly-spacing-2);\n position: relative;\n cursor: pointer;\n padding: var(--nuraly-spacing-tabs-padding, var(--nuraly-spacing-3) var(--nuraly-spacing-4));\n border: var(--nuraly-border-tabs-label);\n border-bottom: var(--nuraly-border-width-medium, 2px) solid transparent;\n background-color: var(--nuraly-color-tabs-label-background);\n color: var(--nuraly-color-tabs-label-text);\n font-family: var(--nuraly-font-family);\n font-size: var(--nuraly-font-size-body);\n font-weight: var(--nuraly-font-weight-regular);\n user-select: none;\n white-space: nowrap;\n\n &:hover {\n color: var(--nuraly-color-tabs-label-text-hover);\n background-color: var(--nuraly-color-tabs-label-background-hover);\n border-color: var(--nuraly-color-tabs-label-border-hover);\n }\n\n &:focus {\n outline: var(--nuraly-focus-outline);\n outline-offset: var(--nuraly-focus-outline-offset);\n }\n\n &.active {\n color: var(--nuraly-color-tabs-label-text-active);\n background-color: var(--nuraly-color-tabs-label-background-active);\n border-color: var(--nuraly-color-tabs-label-border-active);\n font-weight: var(--nuraly-font-weight-semibold);\n }\n\n /* Positioning-specific border radius for horizontal tabs */\n &.first-tab {\n border-radius: var(--nuraly-border-radius-tabs-first);\n }\n\n &.middle-tab {\n border-radius: var(--nuraly-border-radius-tabs-middle);\n }\n\n &.last-tab {\n border-radius: var(--nuraly-border-radius-tabs-last);\n }\n\n &.single-tab {\n border-radius: var(--nuraly-border-radius-tabs-single);\n }\n\n &.disabled {\n cursor: not-allowed;\n color: var(--nuraly-color-text-disabled);\n background-color: var(--nuraly-color-background-disabled);\n \n &:hover {\n color: var(--nuraly-color-text-disabled);\n background-color: var(--nuraly-color-background-disabled);\n border-color: transparent;\n }\n }\n }\n\n /* Tab icon styling */\n .tab-icon {\n flex-shrink: 0;\n width: var(--nuraly-tabs-icon-size, 1rem);\n height: var(--nuraly-tabs-icon-size, 1rem);\n color: inherit;\n }\n\n /* Tab text styling */\n .tab-text {\n flex: 1;\n color: inherit;\n \n &[contenteditable=\"true\"] {\n cursor: text;\n outline: none;\n \n &:focus {\n background-color: var(--nuraly-color-tabs-edit-background);\n border-radius: var(--nuraly-border-radius-small);\n padding: var(--nuraly-spacing-1);\n }\n }\n }\n\n /* Close/delete icon styling */\n .close-icon {\n flex-shrink: 0;\n width: var(--nuraly-tabs-close-icon-size, 0.875rem);\n height: var(--nuraly-tabs-close-icon-size, 0.875rem);\n color: var(--nuraly-color-tabs-close-icon);\n cursor: pointer;\n padding: var(--nuraly-spacing-1);\n border-radius: var(--nuraly-border-radius-small);\n\n &:hover {\n color: var(--nuraly-color-tabs-close-icon-hover);\n background-color: var(--nuraly-color-tabs-close-icon-background-hover);\n }\n\n &:active {\n color: var(--nuraly-color-tabs-close-icon-active);\n background-color: var(--nuraly-color-tabs-close-icon-background-active);\n }\n }\n\n /* Add tab button styling */\n .add-tab-label {\n min-width: auto;\n width: var(--nuraly-tabs-add-button-size, 2.5rem);\n color: var(--nuraly-color-tabs-add-icon);\n \n &:hover {\n color: var(--nuraly-color-tabs-add-icon-hover);\n background-color: var(--nuraly-color-tabs-add-background-hover);\n }\n }\n\n .add-tab-icon {\n width: var(--nuraly-tabs-add-icon-size, 1rem);\n height: var(--nuraly-tabs-add-icon-size, 1rem);\n color: inherit;\n }\n\n /* Tab content area */\n .tab-content {\n flex: 1;\n padding: var(--nuraly-spacing-tabs-content-padding, var(--nuraly-spacing-4));\n background-color: var(--nuraly-color-tabs-content-background);\n border: var(--nuraly-border-tabs-content);\n border-top: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);\n overflow-y: auto;\n overflow-x: hidden;\n max-height: 100vh;\n }\n\n /* Orientation specific styles */\n .vertical-align {\n flex-direction: row;\n \n .tab-labels {\n flex-direction: column;\n min-width: var(--nuraly-tabs-vertical-width, 12rem);\n }\n \n .tab-content {\n border-top: none;\n border-left: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);\n }\n \n .tab-label {\n border-bottom: var(--nuraly-border-tabs-label);\n border-right: var(--nuraly-border-width-medium, 2px) solid transparent;\n \n &:hover,\n &.active {\n border-right-color: var(--nuraly-color-tabs-label-border-active);\n }\n }\n }\n\n .vertical-align.right-align {\n flex-direction: row-reverse;\n \n .tab-content {\n border-left: none;\n border-right: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);\n }\n \n .tab-label {\n border-right: var(--nuraly-border-tabs-label);\n border-left: var(--nuraly-border-width-medium, 2px) solid transparent;\n \n &:hover,\n &.active {\n border-left-color: var(--nuraly-color-tabs-label-border-active);\n border-right-color: transparent;\n }\n }\n }\n\n /* Alignment specific styles */\n .right-align > .tab-labels {\n flex-direction: row-reverse;\n align-self: flex-end;\n }\n\n .center-align > .tab-labels {\n align-self: center;\n }\n\n .horizontal-align {\n flex-direction: column;\n }\n\n /* Size variations */\n :host([data-size=\"small\"]) {\n .tab-label {\n padding: var(--nuraly-spacing-2) var(--nuraly-spacing-3);\n font-size: var(--nuraly-font-size-small);\n }\n \n .tab-content {\n padding: var(--nuraly-spacing-3);\n }\n }\n\n :host([data-size=\"large\"]) {\n .tab-label {\n padding: var(--nuraly-spacing-4) var(--nuraly-spacing-6);\n font-size: var(--nuraly-font-size-large);\n }\n \n .tab-content {\n padding: var(--nuraly-spacing-6);\n }\n }\n\n /* Type variations */\n :host([data-type=\"card\"]) {\n .tab-label {\n border: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);\n border-radius: var(--nuraly-border-radius-medium);\n margin: 0 var(--nuraly-spacing-1);\n \n &.active {\n background-color: var(--nuraly-color-primary);\n color: var(--nuraly-color-primary-text);\n border-color: var(--nuraly-color-primary);\n }\n }\n }\n\n :host([data-type=\"bordered\"]) {\n .tabs-container {\n border: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);\n border-radius: var(--nuraly-border-radius-medium);\n }\n }\n\n /* Drag and drop states */\n .tab-label.dragging-start {\n opacity: 0.7;\n border: var(--nuraly-border-width-thin, 1px) dashed var(--nuraly-color-border-strong);\n background-color: var(--nuraly-color-background-hover);\n }\n\n .tab-label.dragging {\n border: var(--nuraly-border-width-thin, 1px) dashed var(--nuraly-color-primary);\n background-color: var(--nuraly-color-primary-background);\n opacity: 0.8;\n }\n\n /* Minimal animation support for better performance */\n \n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(var(--nuraly-spacing-2));\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* Accessibility improvements */\n @media (prefers-reduced-motion: reduce) {\n * {\n transition: none !important;\n animation: none !important;\n }\n }\n\n /* Focus management for keyboard navigation */\n .tab-label[tabindex=\"0\"] {\n position: relative;\n }\n\n .tab-label:focus-visible {\n z-index: 1;\n }\n`;"]}
|