tyrell-components 1.0.0-TC51 → 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 (108) 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.d.ts +1 -0
  39. package/lib/components/tabs.js +507 -479
  40. package/lib/components/tag.d.ts +1 -1
  41. package/lib/components/tag.js +236 -235
  42. package/lib/components/textarea.d.ts +1 -1
  43. package/lib/components/textarea.js +457 -456
  44. package/lib/components/tooltip.js +283 -283
  45. package/lib/components/wizard.js +384 -384
  46. package/lib/icons/heroicons/micro.js +392 -392
  47. package/lib/icons/heroicons/mini.js +382 -382
  48. package/lib/icons/heroicons/outline.js +337 -337
  49. package/lib/icons/heroicons/solid.js +407 -407
  50. package/lib/icons/lucide.js +22843 -22843
  51. package/lib/icons/material/filled.js +9653 -9653
  52. package/lib/icons/material/outlined.js +10271 -10271
  53. package/lib/icons/material/round.js +10495 -10495
  54. package/lib/icons/material/sharp.js +9905 -9905
  55. package/lib/icons/material/two-tone.js +12792 -12792
  56. package/lib/index.js +21 -21
  57. package/lib/styles/button.js +176 -288
  58. package/lib/styles/calendar-month.js +123 -183
  59. package/lib/styles/calendar-navigation.js +60 -79
  60. package/lib/styles/calendar.js +8 -9
  61. package/lib/styles/checkbox.js +45 -72
  62. package/lib/styles/copy.js +67 -91
  63. package/lib/styles/custom-scrollbar.js +80 -100
  64. package/lib/styles/date-picker.js +261 -331
  65. package/lib/styles/field-size.d.ts +6 -0
  66. package/lib/styles/field-size.js +91 -0
  67. package/lib/styles/file-upload.js +139 -169
  68. package/lib/styles/icon.js +92 -156
  69. package/lib/styles/input.js +125 -241
  70. package/lib/styles/modal.js +67 -102
  71. package/lib/styles/option.d.ts +1 -1
  72. package/lib/styles/option.js +47 -67
  73. package/lib/styles/popup.js +34 -65
  74. package/lib/styles/radio.js +69 -96
  75. package/lib/styles/resize-observer.js +2 -5
  76. package/lib/styles/scroll-container.js +100 -130
  77. package/lib/styles/select-base.js +525 -778
  78. package/lib/styles/select.js +140 -228
  79. package/lib/styles/step.js +22 -29
  80. package/lib/styles/switch.js +34 -55
  81. package/lib/styles/tab.d.ts +1 -1
  82. package/lib/styles/tab.js +22 -29
  83. package/lib/styles/tabs.d.ts +1 -1
  84. package/lib/styles/tabs.js +175 -237
  85. package/lib/styles/tag.js +135 -188
  86. package/lib/styles/textarea.d.ts +1 -1
  87. package/lib/styles/textarea.js +205 -271
  88. package/lib/styles/tooltip.js +3 -3
  89. package/lib/styles/wizard.js +170 -226
  90. package/lib/types/common.d.ts +2 -0
  91. package/lib/types/common.js +6 -5
  92. package/lib/utils/calendar-utils.js +100 -100
  93. package/lib/utils/custom-scrollbar.js +272 -272
  94. package/lib/utils/flavor-sheet.js +14 -14
  95. package/lib/utils/icon-registry.js +127 -127
  96. package/lib/utils/loader-registry.js +3 -3
  97. package/lib/utils/locale.js +34 -34
  98. package/lib/utils/mobile.js +1 -1
  99. package/lib/utils/number-format.js +54 -54
  100. package/lib/utils/positioning.js +212 -212
  101. package/lib/utils/property-capture.js +36 -36
  102. package/lib/utils/property-manager.js +125 -125
  103. package/lib/utils/resize-observer.js +23 -23
  104. package/lib/utils/scroll-lock.js +57 -57
  105. package/lib/utils/styles.js +17 -17
  106. package/lib/version.d.ts +1 -1
  107. package/lib/version.js +1 -1
  108. 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
  `;