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/scroll-container.js CHANGED
@@ -1,185 +1,155 @@
1
1
  import { customScrollbarStyles } from './custom-scrollbar.js';
2
2
  export const scrollContainerStyles = `
3
3
  :host {
4
- display: block;
5
- position: relative;
6
- overflow: hidden;
4
+ display: block;
5
+ position: relative;
6
+ overflow: hidden;
7
7
  }
8
-
9
8
  .scroll-wrapper {
10
- width: 100%;
11
- height: 100%;
12
- overflow-y: auto;
13
- overflow-x: hidden;
9
+ width: 100%;
10
+ height: 100%;
11
+ overflow-y: auto;
12
+ overflow-x: hidden;
14
13
  }
15
-
16
14
  :host([overflow-x]) .scroll-wrapper {
17
- overflow-x: auto;
15
+ overflow-x: auto;
18
16
  }
19
-
20
17
  :host([max-height]) .scroll-wrapper {
21
- max-height: var(--scroll-max-height);
18
+ max-height: var(--scroll-max-height);
22
19
  }
23
-
24
- /* hide-scrollbar: hides native, no custom */
25
20
  :host([hide-scrollbar]) .scroll-wrapper {
26
- scrollbar-width: none;
27
- -ms-overflow-style: none;
21
+ scrollbar-width: none;
22
+ -ms-overflow-style: none;
28
23
  }
29
-
30
24
  :host([hide-scrollbar]) .scroll-wrapper::-webkit-scrollbar {
31
- display: none;
25
+ display: none;
32
26
  }
33
-
34
- /* scroll-anchoring: we manage scroll position in JS, so turn off the browser's
35
- native scroll anchoring to avoid double-compensation. */
36
27
  :host([scroll-anchoring]) .scroll-wrapper {
37
- overflow-anchor: none;
28
+ overflow-anchor: none;
38
29
  }
39
-
40
- /* custom-scrollbar: hides native */
41
30
  :host([custom-scrollbar]) .scroll-wrapper {
42
- scrollbar-width: none;
43
- -ms-overflow-style: none;
31
+ scrollbar-width: none;
32
+ -ms-overflow-style: none;
44
33
  }
45
-
46
34
  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {
47
- display: none;
35
+ display: none;
48
36
  }
49
-
50
37
  :host([custom-scrollbar]:hover) .ty-scrollbar-track-y.has-overflow,
51
38
  :host([custom-scrollbar]:hover) .ty-scrollbar-track-x.has-overflow {
52
- opacity: 1;
39
+ opacity: 1;
53
40
  }
54
-
55
- /* Corner gap when both axes are present */
56
41
  :host([custom-scrollbar][overflow-x]) .ty-scrollbar-track-y {
57
- bottom: var(--ty-scrollbar-width, 8px);
42
+ bottom: var(--ty-scrollbar-width, 8px);
58
43
  }
59
-
60
44
  :host([custom-scrollbar]) .ty-scrollbar-track-x {
61
- right: var(--ty-scrollbar-width, 8px);
45
+ right: var(--ty-scrollbar-width, 8px);
62
46
  }
63
-
64
47
  .shadow-overlay {
65
- position: absolute;
66
- inset: 0;
67
- pointer-events: none;
68
- z-index: 2;
48
+ position: absolute;
49
+ inset: 0;
50
+ pointer-events: none;
51
+ z-index: 2;
69
52
  }
70
-
71
53
  .shadow-top,
72
54
  .shadow-bottom,
73
55
  .shadow-left,
74
56
  .shadow-right {
75
- position: absolute;
76
- opacity: 0;
77
- transition: var(--ty-scroll-shadow-transition, opacity 0.2s ease-out);
78
- pointer-events: none;
57
+ position: absolute;
58
+ opacity: 0;
59
+ transition: var(--ty-scroll-shadow-transition, opacity 0.2s ease-out);
60
+ pointer-events: none;
79
61
  }
80
-
81
62
  .shadow-top {
82
- top: -40px;
83
- left: 0;
84
- right: 0;
85
- height: 80px;
86
- background: var(--ty-scroll-shadow-top, radial-gradient(
87
- ellipse 100% 30% at center,
88
- color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),
89
- transparent,
90
- transparent
91
- ));
92
- clip-path: inset(50% 0 0 0);
93
- }
94
-
63
+ top: -40px;
64
+ left: 0;
65
+ right: 0;
66
+ height: 80px;
67
+ background: var(--ty-scroll-shadow-top, radial-gradient(
68
+ ellipse 100% 30% at center,
69
+ color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),
70
+ transparent,
71
+ transparent
72
+ ));
73
+ clip-path: inset(50% 0 0 0);
74
+ }
95
75
  .shadow-bottom {
96
- bottom: -30px;
97
- left: 0;
98
- right: 0;
99
- height: 60px;
100
- background: var(--ty-scroll-shadow-bottom, radial-gradient(
101
- ellipse 100% 20% at center,
102
- color-mix(in oklab, var(--ty-color-neutral-bold) 18%, transparent),
103
- transparent,
104
- transparent
105
- ));
106
- clip-path: inset(0 0 50% 0);
107
- }
108
-
76
+ bottom: -30px;
77
+ left: 0;
78
+ right: 0;
79
+ height: 60px;
80
+ background: var(--ty-scroll-shadow-bottom, radial-gradient(
81
+ ellipse 100% 20% at center,
82
+ color-mix(in oklab, var(--ty-color-neutral-bold) 18%, transparent),
83
+ transparent,
84
+ transparent
85
+ ));
86
+ clip-path: inset(0 0 50% 0);
87
+ }
109
88
  .shadow-left {
110
- left: -30px;
111
- top: 0;
112
- bottom: 0;
113
- width: 60px;
114
- background: var(--ty-scroll-shadow-left, radial-gradient(
115
- ellipse 30% 100% at center,
116
- color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),
117
- transparent,
118
- transparent
119
- ));
120
- clip-path: inset(0 0 0 50%);
121
- }
122
-
89
+ left: -30px;
90
+ top: 0;
91
+ bottom: 0;
92
+ width: 60px;
93
+ background: var(--ty-scroll-shadow-left, radial-gradient(
94
+ ellipse 30% 100% at center,
95
+ color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),
96
+ transparent,
97
+ transparent
98
+ ));
99
+ clip-path: inset(0 0 0 50%);
100
+ }
123
101
  .shadow-right {
124
- right: -30px;
125
- top: 0;
126
- bottom: 0;
127
- width: 60px;
128
- background: var(--ty-scroll-shadow-right, radial-gradient(
129
- ellipse 30% 100% at center,
130
- color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),
131
- transparent,
132
- transparent
133
- ));
134
- clip-path: inset(0 50% 0 0);
135
- }
136
-
102
+ right: -30px;
103
+ top: 0;
104
+ bottom: 0;
105
+ width: 60px;
106
+ background: var(--ty-scroll-shadow-right, radial-gradient(
107
+ ellipse 30% 100% at center,
108
+ color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),
109
+ transparent,
110
+ transparent
111
+ ));
112
+ clip-path: inset(0 50% 0 0);
113
+ }
137
114
  .shadow-left,
138
115
  .shadow-right {
139
- display: none;
116
+ display: none;
140
117
  }
141
-
142
118
  :host([overflow-x]) .shadow-left,
143
119
  :host([overflow-x]) .shadow-right {
144
- display: block;
120
+ display: block;
145
121
  }
146
-
147
122
  .shadow-top.visible,
148
123
  .shadow-bottom.visible,
149
124
  .shadow-left.visible,
150
125
  .shadow-right.visible {
151
- opacity: 1;
126
+ opacity: 1;
152
127
  }
153
-
154
128
  :host([shadow="false"]) .shadow-overlay {
155
- display: none;
129
+ display: none;
156
130
  }
157
-
158
- /* Touch devices - restore native scrollbar */
159
131
  @media (pointer: coarse) and (hover: none) {
160
- :host([custom-scrollbar]) .scroll-wrapper {
161
- scrollbar-width: thin;
162
- scrollbar-color: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent)) transparent;
163
- }
164
- :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {
165
- display: block;
166
- width: 4px;
167
- height: 4px;
168
- }
169
- :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {
170
- background: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent));
171
- border-radius: 2px;
172
- }
173
- }
174
-
132
+ :host([custom-scrollbar]) .scroll-wrapper {
133
+ scrollbar-width: thin;
134
+ scrollbar-color: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent)) transparent;
135
+ }
136
+ :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {
137
+ display: block;
138
+ width: 4px;
139
+ height: 4px;
140
+ }
141
+ :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {
142
+ background: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent));
143
+ border-radius: 2px;
144
+ }
145
+ }
175
146
  @media (prefers-reduced-motion: reduce) {
176
- .shadow-top,
177
- .shadow-bottom,
178
- .shadow-left,
179
- .shadow-right {
180
- transition-duration: 0ms !important;
181
- }
182
- }
183
-
147
+ .shadow-top,
148
+ .shadow-bottom,
149
+ .shadow-left,
150
+ .shadow-right {
151
+ transition-duration: 0ms !important;
152
+ }
153
+ }
184
154
  ${customScrollbarStyles}
185
155
  `;