tyrell-components 1.0.0-TC52 → 1.0.0-TC53

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 (105) hide show
  1. package/css/tyrell-theme.css +25 -2
  2. package/css/tyrell.css +4 -0
  3. package/dist/tyrell-colors-static.css +1 -316
  4. package/dist/tyrell-theme.css +1 -1443
  5. package/dist/tyrell.css +1 -1390
  6. package/dist/tyrell.js +1 -1
  7. package/lib/base/ty-component.js +196 -196
  8. package/lib/components/button.d.ts +1 -1
  9. package/lib/components/button.js +260 -259
  10. package/lib/components/calendar-month.d.ts +2 -2
  11. package/lib/components/calendar-month.js +426 -416
  12. package/lib/components/calendar-navigation.js +238 -238
  13. package/lib/components/calendar.js +605 -602
  14. package/lib/components/checkbox.d.ts +1 -1
  15. package/lib/components/checkbox.js +273 -272
  16. package/lib/components/copy.d.ts +1 -1
  17. package/lib/components/copy.js +279 -278
  18. package/lib/components/date-picker.d.ts +1 -1
  19. package/lib/components/date-picker.js +1103 -1108
  20. package/lib/components/file-upload.js +404 -404
  21. package/lib/components/icon.js +141 -141
  22. package/lib/components/input.d.ts +1 -1
  23. package/lib/components/input.js +593 -596
  24. package/lib/components/modal.js +319 -319
  25. package/lib/components/option.js +167 -167
  26. package/lib/components/popup.js +233 -233
  27. package/lib/components/radio.d.ts +2 -2
  28. package/lib/components/radio.js +407 -406
  29. package/lib/components/resize-observer.js +67 -67
  30. package/lib/components/scroll-container.js +294 -294
  31. package/lib/components/select.d.ts +1 -1
  32. package/lib/components/select.js +1524 -1532
  33. package/lib/components/selected-tags.js +184 -184
  34. package/lib/components/step.js +62 -62
  35. package/lib/components/switch.d.ts +1 -1
  36. package/lib/components/switch.js +214 -213
  37. package/lib/components/tab.js +62 -62
  38. package/lib/components/tabs.js +507 -507
  39. package/lib/components/tag.d.ts +1 -1
  40. package/lib/components/tag.js +236 -235
  41. package/lib/components/textarea.d.ts +1 -1
  42. package/lib/components/textarea.js +457 -456
  43. package/lib/components/tooltip.js +283 -283
  44. package/lib/components/wizard.js +384 -384
  45. package/lib/icons/heroicons/micro.js +392 -392
  46. package/lib/icons/heroicons/mini.js +382 -382
  47. package/lib/icons/heroicons/outline.js +337 -337
  48. package/lib/icons/heroicons/solid.js +407 -407
  49. package/lib/icons/lucide.js +22843 -22843
  50. package/lib/icons/material/filled.js +9653 -9653
  51. package/lib/icons/material/outlined.js +10271 -10271
  52. package/lib/icons/material/round.js +10495 -10495
  53. package/lib/icons/material/sharp.js +9905 -9905
  54. package/lib/icons/material/two-tone.js +12792 -12792
  55. package/lib/index.js +21 -21
  56. package/lib/styles/button.js +176 -288
  57. package/lib/styles/calendar-month.js +123 -183
  58. package/lib/styles/calendar-navigation.js +60 -79
  59. package/lib/styles/calendar.js +8 -9
  60. package/lib/styles/checkbox.js +45 -72
  61. package/lib/styles/copy.js +67 -91
  62. package/lib/styles/custom-scrollbar.js +80 -100
  63. package/lib/styles/date-picker.js +261 -331
  64. package/lib/styles/field-size.d.ts +6 -0
  65. package/lib/styles/field-size.js +91 -0
  66. package/lib/styles/file-upload.js +139 -169
  67. package/lib/styles/icon.js +92 -156
  68. package/lib/styles/input.js +125 -241
  69. package/lib/styles/modal.js +67 -102
  70. package/lib/styles/option.d.ts +1 -1
  71. package/lib/styles/option.js +47 -67
  72. package/lib/styles/popup.js +34 -65
  73. package/lib/styles/radio.js +69 -96
  74. package/lib/styles/resize-observer.js +2 -5
  75. package/lib/styles/scroll-container.js +100 -130
  76. package/lib/styles/select-base.js +525 -778
  77. package/lib/styles/select.js +140 -228
  78. package/lib/styles/step.js +22 -29
  79. package/lib/styles/switch.js +34 -55
  80. package/lib/styles/tab.js +22 -29
  81. package/lib/styles/tabs.js +171 -252
  82. package/lib/styles/tag.js +135 -188
  83. package/lib/styles/textarea.d.ts +1 -1
  84. package/lib/styles/textarea.js +205 -271
  85. package/lib/styles/tooltip.js +3 -3
  86. package/lib/styles/wizard.js +170 -226
  87. package/lib/types/common.d.ts +2 -0
  88. package/lib/types/common.js +6 -5
  89. package/lib/utils/calendar-utils.js +100 -100
  90. package/lib/utils/custom-scrollbar.js +272 -272
  91. package/lib/utils/flavor-sheet.js +14 -14
  92. package/lib/utils/icon-registry.js +127 -127
  93. package/lib/utils/loader-registry.js +3 -3
  94. package/lib/utils/locale.js +34 -34
  95. package/lib/utils/mobile.js +1 -1
  96. package/lib/utils/number-format.js +54 -54
  97. package/lib/utils/positioning.js +212 -212
  98. package/lib/utils/property-capture.js +36 -36
  99. package/lib/utils/property-manager.js +125 -125
  100. package/lib/utils/resize-observer.js +23 -23
  101. package/lib/utils/scroll-lock.js +57 -57
  102. package/lib/utils/styles.js +17 -17
  103. package/lib/version.d.ts +1 -1
  104. package/lib/version.js +1 -1
  105. package/package.json +4 -4
package/lib/styles/field-size.js ADDED
@@ -0,0 +1,91 @@
1
+ export const fieldSizeVars = `
2
+ :host {
3
+ --ty-field-height: var(--ty-size-sm, 2rem);
4
+ --ty-field-pad-x: 10px;
5
+ --ty-field-font: var(--ty-font-sm);
6
+ --ty-field-leading: 20px;
7
+ --ty-field-tracking: var(--ty-tracking-sm);
8
+ --ty-field-label-font: var(--ty-font-xs);
9
+ --ty-field-label-leading: var(--ty-leading-xs);
10
+ --ty-field-label-gap: 5px;
11
+ --ty-field-outer-pad-x: calc(var(--ty-field-pad-x) + 1px);
12
+ --ty-field-control: 24px;
13
+ --ty-field-icon: 16px;
14
+ }
15
+ :host([size="xs"]) {
16
+ --ty-field-height: var(--ty-size-xs, 1.75rem);
17
+ --ty-field-pad-x: 8px;
18
+ --ty-field-font: var(--ty-font-xs);
19
+ --ty-field-leading: 16px;
20
+ --ty-field-tracking: var(--ty-tracking-xs);
21
+ --ty-field-label-font: var(--ty-font-xs);
22
+ --ty-field-label-leading: var(--ty-leading-xs);
23
+ --ty-field-label-gap: 4px;
24
+ --ty-field-control: 20px;
25
+ --ty-field-icon: 14px;
26
+ }
27
+ :host([size="md"]) {
28
+ --ty-field-height: var(--ty-size-md, 2.25rem);
29
+ --ty-field-pad-x: 12px;
30
+ --ty-field-font: var(--ty-font-sm);
31
+ --ty-field-leading: 20px;
32
+ --ty-field-tracking: var(--ty-tracking-sm);
33
+ --ty-field-label-font: var(--ty-font-sm);
34
+ --ty-field-label-leading: var(--ty-leading-sm);
35
+ --ty-field-label-gap: 6px;
36
+ --ty-field-control: 28px;
37
+ --ty-field-icon: 18px;
38
+ }
39
+ :host([size="lg"]) {
40
+ --ty-field-height: var(--ty-size-lg, 2.5rem);
41
+ --ty-field-pad-x: 14px;
42
+ --ty-field-font: var(--ty-font-base);
43
+ --ty-field-leading: 24px;
44
+ --ty-field-tracking: var(--ty-tracking-base);
45
+ --ty-field-label-font: var(--ty-font-sm);
46
+ --ty-field-label-leading: var(--ty-leading-sm);
47
+ --ty-field-label-gap: 6px;
48
+ --ty-field-control: 32px;
49
+ --ty-field-icon: 20px;
50
+ }
51
+ :host([size="xl"]) {
52
+ --ty-field-height: var(--ty-size-xl, 2.75rem);
53
+ --ty-field-pad-x: 16px;
54
+ --ty-field-font: var(--ty-font-lg);
55
+ --ty-field-leading: 28px;
56
+ --ty-field-tracking: var(--ty-tracking-base);
57
+ --ty-field-label-font: var(--ty-font-base);
58
+ --ty-field-label-leading: var(--ty-leading-base);
59
+ --ty-field-label-gap: 8px;
60
+ --ty-field-control: 36px;
61
+ --ty-field-icon: 22px;
62
+ }
63
+ @media (max-width: 640px) {
64
+ :host([size="lg"]) {
65
+ --ty-field-height: var(--ty-size-md, 2.25rem);
66
+ --ty-field-pad-x: 12px;
67
+ --ty-field-font: var(--ty-font-sm);
68
+ --ty-field-leading: 20px;
69
+ --ty-field-control: 28px;
70
+ --ty-field-icon: 18px;
71
+ }
72
+ :host([size="xl"]) {
73
+ --ty-field-height: var(--ty-size-lg, 2.5rem);
74
+ --ty-field-pad-x: 14px;
75
+ --ty-field-font: var(--ty-font-base);
76
+ --ty-field-leading: 24px;
77
+ --ty-field-control: 32px;
78
+ --ty-field-icon: 20px;
79
+ }
80
+ }
81
+ @media (max-width: 480px) {
82
+ :host([size="xl"]) {
83
+ --ty-field-height: var(--ty-size-md, 2.25rem);
84
+ --ty-field-pad-x: 12px;
85
+ --ty-field-font: var(--ty-font-sm);
86
+ --ty-field-leading: 20px;
87
+ --ty-field-control: 28px;
88
+ --ty-field-icon: 18px;
89
+ }
90
+ }
91
+ `;
package/lib/styles/file-upload.js CHANGED
@@ -1,226 +1,196 @@
1
1
  export const fileUploadStyles = `
2
2
  :host {
3
- display: block;
4
- font-family: inherit;
5
- width: 100%;
3
+ display: block;
4
+ font-family: inherit;
5
+ width: 100%;
6
6
  }
7
-
8
7
  .file-upload-container {
9
- display: flex;
10
- flex-direction: column;
11
- width: 100%;
12
- box-sizing: border-box;
8
+ display: flex;
9
+ flex-direction: column;
10
+ width: 100%;
11
+ box-sizing: border-box;
13
12
  }
14
-
15
13
  .upload-label {
16
- font-size: var(--ty-font-sm);
17
- line-height: var(--ty-leading-sm);
18
- letter-spacing: var(--ty-tracking-sm);
19
- font-weight: var(--ty-font-medium);
20
- color: var(--ty-label-color);
21
- margin-bottom: 6px;
22
- padding-left: 4px;
23
- display: flex;
24
- align-items: center;
25
- }
26
-
14
+ font-size: var(--ty-font-sm);
15
+ line-height: var(--ty-leading-sm);
16
+ letter-spacing: var(--ty-tracking-sm);
17
+ font-weight: var(--ty-font-medium);
18
+ color: var(--ty-label-color);
19
+ margin-bottom: 6px;
20
+ padding-left: 4px;
21
+ display: flex;
22
+ align-items: center;
23
+ }
27
24
  .required-icon {
28
- color: var(--ty-color-danger);
29
- margin-left: 4px;
30
- font-size: 0.75rem;
31
- line-height: 1;
25
+ color: var(--ty-color-danger);
26
+ margin-left: 4px;
27
+ font-size: 0.75rem;
28
+ line-height: 1;
32
29
  }
33
-
34
30
  .drop-zone {
35
- border: 2px dashed var(--ty-border);
36
- border-radius: var(--ty-radius-base);
37
- padding: 2rem 1.5rem;
38
- text-align: center;
39
- cursor: pointer;
40
- transition: var(--ty-local-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);
41
- outline: none;
42
- display: flex;
43
- flex-direction: column;
44
- align-items: center;
45
- justify-content: center;
46
- gap: 0.5rem;
47
- min-height: 140px;
48
- user-select: none;
49
- }
50
-
31
+ border: 2px dashed var(--ty-border);
32
+ border-radius: var(--ty-radius-base);
33
+ padding: 2rem 1.5rem;
34
+ text-align: center;
35
+ cursor: pointer;
36
+ transition: var(--ty-local-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);
37
+ outline: none;
38
+ display: flex;
39
+ flex-direction: column;
40
+ align-items: center;
41
+ justify-content: center;
42
+ gap: 0.5rem;
43
+ min-height: 140px;
44
+ user-select: none;
45
+ }
51
46
  .drop-zone:hover:not(.disabled) {
52
- border-color: var(--ty-input-border-hover);
53
- background: var(--ty-surface-content);
47
+ border-color: var(--ty-input-border-hover);
48
+ background: var(--ty-surface-content);
54
49
  }
55
-
56
50
  .drop-zone.focused {
57
- border-color: var(--ty-input-border-focus);
58
- box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);
51
+ border-color: var(--ty-input-border-focus);
52
+ box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);
59
53
  }
60
-
61
54
  .drop-zone.drag-active {
62
- border-color: var(--ty-color-primary);
63
- border-style: solid;
64
- background: var(--ty-bg-primary-);
55
+ border-color: var(--ty-color-primary);
56
+ border-style: solid;
57
+ background: var(--ty-bg-primary-);
65
58
  }
66
-
67
59
  .drop-zone.drag-active .upload-icon {
68
- color: var(--ty-color-primary);
69
- transform: translateY(-2px);
60
+ color: var(--ty-color-primary);
61
+ transform: translateY(-2px);
70
62
  }
71
-
72
63
  .drop-zone.has-files {
73
- min-height: 80px;
74
- padding: 1.25rem 1.5rem;
64
+ min-height: 80px;
65
+ padding: 1.25rem 1.5rem;
75
66
  }
76
-
77
67
  .drop-zone.disabled {
78
- opacity: 0.5;
79
- cursor: not-allowed;
80
- pointer-events: none;
68
+ opacity: 0.5;
69
+ cursor: not-allowed;
70
+ pointer-events: none;
81
71
  }
82
-
83
72
  .drop-zone.error {
84
- border-color: var(--ty-color-danger);
73
+ border-color: var(--ty-color-danger);
85
74
  }
86
-
87
75
  .drop-zone.error:not(.disabled) {
88
- background: var(--ty-bg-danger-);
76
+ background: var(--ty-bg-danger-);
89
77
  }
90
-
91
78
  .upload-icon {
92
- color: var(--ty-text-faint);
93
- width: 2.5rem;
94
- height: 2.5rem;
95
- display: flex;
96
- align-items: center;
97
- justify-content: center;
98
- transition: var(--ty-local-transition, color 0.15s ease, transform 0.15s ease);
99
- pointer-events: none;
100
- }
101
-
79
+ color: var(--ty-text-faint);
80
+ width: 2.5rem;
81
+ height: 2.5rem;
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: center;
85
+ transition: var(--ty-local-transition, color 0.15s ease, transform 0.15s ease);
86
+ pointer-events: none;
87
+ }
102
88
  .upload-icon svg {
103
- width: 100%;
104
- height: 100%;
89
+ width: 100%;
90
+ height: 100%;
105
91
  }
106
-
107
92
  .upload-hint {
108
- color: var(--ty-text-soft);
109
- font-size: var(--ty-font-sm);
110
- line-height: var(--ty-leading-sm);
111
- pointer-events: none;
93
+ color: var(--ty-text-soft);
94
+ font-size: var(--ty-font-sm);
95
+ line-height: var(--ty-leading-sm);
96
+ pointer-events: none;
112
97
  }
113
-
114
98
  .browse-link {
115
- color: var(--ty-color-primary);
116
- font-weight: var(--ty-font-medium);
99
+ color: var(--ty-color-primary);
100
+ font-weight: var(--ty-font-medium);
117
101
  }
118
-
119
102
  .upload-sub-hint {
120
- color: var(--ty-text-faint);
121
- font-size: var(--ty-font-xs);
122
- line-height: var(--ty-leading-xs);
123
- pointer-events: none;
103
+ color: var(--ty-text-faint);
104
+ font-size: var(--ty-font-xs);
105
+ line-height: var(--ty-leading-xs);
106
+ pointer-events: none;
124
107
  }
125
-
126
108
  .file-list {
127
- display: flex;
128
- flex-direction: column;
129
- gap: 0.375rem;
130
- margin-top: 0.5rem;
109
+ display: flex;
110
+ flex-direction: column;
111
+ gap: 0.375rem;
112
+ margin-top: 0.5rem;
131
113
  }
132
-
133
114
  .file-item {
134
- display: flex;
135
- align-items: center;
136
- gap: 0.5rem;
137
- padding: 0.5rem 0.75rem;
138
- border-radius: var(--ty-radius-base);
139
- background: var(--ty-surface-content);
140
- border: 1px solid var(--ty-border-soft);
141
- }
142
-
115
+ display: flex;
116
+ align-items: center;
117
+ gap: 0.5rem;
118
+ padding: 0.5rem 0.75rem;
119
+ border-radius: var(--ty-radius-base);
120
+ background: var(--ty-surface-content);
121
+ border: 1px solid var(--ty-border-soft);
122
+ }
143
123
  .file-icon {
144
- color: var(--ty-text-faint);
145
- flex-shrink: 0;
146
- width: 1rem;
147
- height: 1rem;
148
- display: flex;
149
- align-items: center;
150
- }
151
-
124
+ color: var(--ty-text-faint);
125
+ flex-shrink: 0;
126
+ width: 1rem;
127
+ height: 1rem;
128
+ display: flex;
129
+ align-items: center;
130
+ }
152
131
  .file-icon svg {
153
- width: 100%;
154
- height: 100%;
132
+ width: 100%;
133
+ height: 100%;
155
134
  }
156
-
157
135
  .file-name {
158
- flex: 1;
159
- font-size: var(--ty-font-sm);
160
- color: var(--ty-text);
161
- white-space: nowrap;
162
- overflow: hidden;
163
- text-overflow: ellipsis;
164
- min-width: 0;
165
- }
166
-
136
+ flex: 1;
137
+ font-size: var(--ty-font-sm);
138
+ color: var(--ty-text);
139
+ white-space: nowrap;
140
+ overflow: hidden;
141
+ text-overflow: ellipsis;
142
+ min-width: 0;
143
+ }
167
144
  .file-size {
168
- font-size: var(--ty-font-xs);
169
- color: var(--ty-text-faint);
170
- flex-shrink: 0;
171
- font-variant-numeric: tabular-nums;
145
+ font-size: var(--ty-font-xs);
146
+ color: var(--ty-text-faint);
147
+ flex-shrink: 0;
148
+ font-variant-numeric: tabular-nums;
172
149
  }
173
-
174
150
  .file-remove {
175
- flex-shrink: 0;
176
- cursor: pointer;
177
- color: var(--ty-text-faint);
178
- width: 1.25rem;
179
- height: 1.25rem;
180
- display: flex;
181
- align-items: center;
182
- justify-content: center;
183
- border-radius: 50%;
184
- transition: var(--ty-local-transition, color 0.15s ease, background-color 0.15s ease);
185
- border: none;
186
- background: none;
187
- padding: 0;
188
- outline: none;
189
- }
190
-
151
+ flex-shrink: 0;
152
+ cursor: pointer;
153
+ color: var(--ty-text-faint);
154
+ width: 1.25rem;
155
+ height: 1.25rem;
156
+ display: flex;
157
+ align-items: center;
158
+ justify-content: center;
159
+ border-radius: 50%;
160
+ transition: var(--ty-local-transition, color 0.15s ease, background-color 0.15s ease);
161
+ border: none;
162
+ background: none;
163
+ padding: 0;
164
+ outline: none;
165
+ }
191
166
  .file-remove:hover {
192
- color: var(--ty-color-danger);
193
- background: var(--ty-bg-danger-);
167
+ color: var(--ty-color-danger);
168
+ background: var(--ty-bg-danger-);
194
169
  }
195
-
196
170
  .file-remove:focus-visible {
197
- box-shadow: 0 0 0 2px var(--ty-color-danger);
171
+ box-shadow: 0 0 0 2px var(--ty-color-danger);
198
172
  }
199
-
200
173
  .file-remove svg {
201
- width: 12px;
202
- height: 12px;
174
+ width: 12px;
175
+ height: 12px;
203
176
  }
204
-
205
177
  .error-message {
206
- font-size: var(--ty-font-xs);
207
- line-height: var(--ty-leading-xs);
208
- color: var(--ty-color-danger);
209
- margin-top: 4px;
210
- padding-left: 4px;
178
+ font-size: var(--ty-font-xs);
179
+ line-height: var(--ty-leading-xs);
180
+ color: var(--ty-color-danger);
181
+ margin-top: 4px;
182
+ padding-left: 4px;
211
183
  }
212
-
213
184
  @media (prefers-reduced-motion: reduce) {
214
- .drop-zone,
215
- .upload-icon,
216
- .file-remove {
217
- transition: none;
218
- }
185
+ .drop-zone,
186
+ .upload-icon,
187
+ .file-remove {
188
+ transition: none;
189
+ }
219
190
  }
220
-
221
191
  @media (prefers-contrast: high) {
222
- .drop-zone {
223
- border-width: 3px;
224
- }
192
+ .drop-zone {
193
+ border-width: 3px;
194
+ }
225
195
  }
226
196
  `;