mtrl 0.3.1 → 0.3.2

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 (159) hide show
  1. package/.env +15 -0
  2. package/CONTRIBUTING.md +8 -8
  3. package/DOCS.md +3 -3
  4. package/README.md +43 -20
  5. package/TESTING.md +128 -18
  6. package/dist/index.js +14865 -0
  7. package/git-user-stats.js +545 -0
  8. package/index.ts +9 -67
  9. package/package.json +8 -3
  10. package/src/components/badge/api.ts +15 -1
  11. package/src/components/badge/badge.ts +43 -4
  12. package/src/components/badge/config.ts +40 -8
  13. package/src/components/badge/index.ts +64 -3
  14. package/src/components/badge/types.ts +175 -33
  15. package/src/components/button/api.ts +63 -1
  16. package/src/components/button/button.ts +39 -3
  17. package/src/components/button/config.ts +21 -4
  18. package/src/components/button/index.ts +26 -1
  19. package/src/components/button/types.ts +7 -1
  20. package/src/components/card/api.ts +78 -9
  21. package/src/components/card/card.ts +58 -3
  22. package/src/components/card/config.ts +41 -11
  23. package/src/components/card/features.ts +39 -12
  24. package/src/components/card/index.ts +84 -19
  25. package/src/components/card/types.ts +218 -29
  26. package/src/components/carousel/carousel.ts +92 -28
  27. package/src/components/carousel/constants.ts +107 -21
  28. package/src/components/carousel/index.ts +31 -13
  29. package/src/components/checkbox/checkbox.ts +83 -16
  30. package/src/components/checkbox/index.ts +43 -1
  31. package/src/components/checkbox/types.ts +219 -32
  32. package/src/components/chips/api.ts +194 -0
  33. package/src/components/{chip → chips/chip}/api.ts +42 -2
  34. package/src/components/chips/chip/chip.ts +131 -0
  35. package/src/components/{chip → chips/chip}/config.ts +3 -3
  36. package/src/components/chips/chip/index.ts +3 -0
  37. package/src/components/chips/chips.md +481 -0
  38. package/src/components/chips/chips.ts +75 -0
  39. package/src/components/chips/config.ts +109 -0
  40. package/src/components/chips/constants.ts +61 -0
  41. package/src/components/chips/features/chip-items.ts +33 -0
  42. package/src/components/chips/features/container.ts +77 -0
  43. package/src/components/chips/features/controller.ts +448 -0
  44. package/src/components/chips/features/index.ts +5 -0
  45. package/src/components/chips/features/label.ts +108 -0
  46. package/src/components/chips/index.ts +11 -0
  47. package/src/components/chips/schema.ts +61 -0
  48. package/src/components/{chip → chips}/types.ts +203 -92
  49. package/src/components/dialog/dialog.ts +99 -16
  50. package/src/components/dialog/index.ts +97 -1
  51. package/src/components/dialog/types.ts +375 -69
  52. package/src/components/divider/config.ts +90 -6
  53. package/src/components/divider/divider.ts +32 -2
  54. package/src/components/divider/features.ts +26 -0
  55. package/src/components/divider/index.ts +30 -0
  56. package/src/components/divider/types.ts +86 -9
  57. package/src/components/extended-fab/api.ts +53 -1
  58. package/src/components/extended-fab/config.ts +29 -1
  59. package/src/components/extended-fab/extended-fab.ts +28 -0
  60. package/src/components/extended-fab/index.ts +36 -0
  61. package/src/components/extended-fab/types.ts +458 -13
  62. package/src/components/fab/api.ts +42 -2
  63. package/src/components/fab/config.ts +29 -1
  64. package/src/components/fab/fab.ts +16 -2
  65. package/src/components/fab/index.ts +35 -0
  66. package/src/components/fab/types.ts +374 -10
  67. package/src/components/list/api.ts +12 -2
  68. package/src/components/list/config.ts +21 -0
  69. package/src/components/list/features.ts +6 -0
  70. package/src/components/list/index.ts +56 -1
  71. package/src/components/list/list-item.ts +46 -2
  72. package/src/components/list/list.ts +73 -2
  73. package/src/components/list/types.ts +172 -0
  74. package/src/components/list/utils.ts +26 -2
  75. package/src/components/menu/api.ts +217 -20
  76. package/src/components/menu/config.ts +27 -0
  77. package/src/components/menu/features/visibility.ts +55 -6
  78. package/src/components/menu/index.ts +64 -0
  79. package/src/components/menu/menu-item.ts +46 -3
  80. package/src/components/menu/menu.ts +77 -1
  81. package/src/components/menu/types.ts +404 -39
  82. package/src/components/sheet/config.ts +1 -2
  83. package/src/components/sheet/features/gestures.ts +1 -1
  84. package/src/components/sheet/features/position.ts +1 -2
  85. package/src/components/sheet/features/state.ts +1 -1
  86. package/src/components/sheet/index.ts +10 -2
  87. package/src/components/sheet/sheet.ts +1 -2
  88. package/src/components/sheet/types.ts +29 -1
  89. package/src/components/slider/api.ts +1 -1
  90. package/src/components/slider/config.ts +1 -1
  91. package/src/components/slider/features/controller.ts +1 -1
  92. package/src/components/slider/features/handlers.ts +1 -1
  93. package/src/components/slider/features/states.ts +1 -1
  94. package/src/components/slider/index.ts +12 -5
  95. package/src/components/slider/schema.ts +1 -1
  96. package/src/components/slider/types.ts +31 -0
  97. package/src/components/tabs/tab-api.ts +1 -1
  98. package/src/components/tabs/types.ts +1 -1
  99. package/src/components/tooltip/api.ts +6 -2
  100. package/src/components/tooltip/config.ts +9 -28
  101. package/src/components/tooltip/index.ts +10 -1
  102. package/src/components/tooltip/types.ts +38 -3
  103. package/src/index.ts +129 -31
  104. package/src/styles/abstract/_mixins.scss +23 -9
  105. package/src/styles/abstract/_variables.scss +14 -4
  106. package/src/styles/components/_card.scss +1 -1
  107. package/src/styles/components/_chip.scss +323 -113
  108. package/src/styles/components/_tabs.scss +1 -1
  109. package/CLAUDE.md +0 -33
  110. package/src/components/checkbox/constants.ts +0 -37
  111. package/src/components/chip/chip-set.ts +0 -225
  112. package/src/components/chip/chip.ts +0 -118
  113. package/src/components/chip/constants.ts +0 -28
  114. package/src/components/chip/index.ts +0 -12
  115. package/src/components/list/constants.ts +0 -116
  116. package/src/components/sheet/constants.ts +0 -20
  117. package/src/components/slider/constants.ts +0 -32
  118. package/src/components/tooltip/constants.ts +0 -27
  119. package/test/components/badge.test.ts +0 -545
  120. package/test/components/bottom-app-bar.test.ts +0 -303
  121. package/test/components/button.test.ts +0 -233
  122. package/test/components/card.test.ts +0 -560
  123. package/test/components/carousel.test.ts +0 -951
  124. package/test/components/checkbox.test.ts +0 -462
  125. package/test/components/chip.test.ts +0 -692
  126. package/test/components/datepicker.test.ts +0 -1124
  127. package/test/components/dialog.test.ts +0 -990
  128. package/test/components/divider.test.ts +0 -412
  129. package/test/components/extended-fab.test.ts +0 -672
  130. package/test/components/fab.test.ts +0 -561
  131. package/test/components/list.test.ts +0 -365
  132. package/test/components/menu.test.ts +0 -718
  133. package/test/components/navigation.test.ts +0 -186
  134. package/test/components/progress.test.ts +0 -567
  135. package/test/components/radios.test.ts +0 -699
  136. package/test/components/search.test.ts +0 -1135
  137. package/test/components/segmented-button.test.ts +0 -732
  138. package/test/components/sheet.test.ts +0 -641
  139. package/test/components/slider.test.ts +0 -1220
  140. package/test/components/snackbar.test.ts +0 -461
  141. package/test/components/switch.test.ts +0 -452
  142. package/test/components/tabs.test.ts +0 -1369
  143. package/test/components/textfield.test.ts +0 -400
  144. package/test/components/timepicker.test.ts +0 -592
  145. package/test/components/tooltip.test.ts +0 -630
  146. package/test/components/top-app-bar.test.ts +0 -566
  147. package/test/core/dom.attributes.test.ts +0 -148
  148. package/test/core/dom.classes.test.ts +0 -152
  149. package/test/core/dom.events.test.ts +0 -243
  150. package/test/core/emitter.test.ts +0 -141
  151. package/test/core/ripple.test.ts +0 -99
  152. package/test/core/state.store.test.ts +0 -189
  153. package/test/core/utils.normalize.test.ts +0 -61
  154. package/test/core/utils.object.test.ts +0 -120
  155. package/test/setup.js +0 -371
  156. package/test/setup.ts +0 -451
  157. package/tsconfig.json +0 -22
  158. package/typedoc.json +0 -28
  159. package/typedoc.simple.json +0 -14
package/test/components/divider.test.ts DELETED
@@ -1,412 +0,0 @@
1
- // test/components/divider.test.ts
2
- import { describe, test, expect } from 'bun:test';
3
- import { JSDOM } from 'jsdom';
4
-
5
- // Set up JSDOM
6
- const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`);
7
- global.document = dom.window.document;
8
- global.window = dom.window;
9
- global.Element = dom.window.Element;
10
- global.HTMLElement = dom.window.HTMLElement;
11
- global.Event = dom.window.Event;
12
- global.CustomEvent = dom.window.CustomEvent;
13
-
14
- // Import types directly to avoid circular dependencies
15
- import type {
16
- DividerComponent
17
- } from '../../src/components/divider/types';
18
-
19
- // Import divider config directly
20
- import type {
21
- DividerConfig
22
- } from '../../src/components/divider/config';
23
-
24
- // Create a mock divider implementation
25
- const createMockDivider = (config: DividerConfig = {}): DividerComponent => {
26
- // Default configuration
27
- const defaultConfig: DividerConfig = {
28
- orientation: 'horizontal',
29
- variant: 'full-width',
30
- thickness: 1,
31
- prefix: 'mtrl',
32
- componentName: 'divider'
33
- };
34
-
35
- // Merge with user configuration
36
- const mergedConfig = {
37
- ...defaultConfig,
38
- ...config
39
- };
40
-
41
- // Create main element
42
- const element = document.createElement('hr');
43
- element.className = `${mergedConfig.prefix}-${mergedConfig.componentName}`;
44
-
45
- // Add custom class if provided
46
- if (mergedConfig.class) {
47
- element.className += ` ${mergedConfig.class}`;
48
- }
49
-
50
- // Apply orientation class
51
- element.classList.add(`${mergedConfig.prefix}-${mergedConfig.componentName}--${mergedConfig.orientation}`);
52
-
53
- // Apply variant class if not full-width
54
- if (mergedConfig.variant !== 'full-width') {
55
- element.classList.add(`${mergedConfig.prefix}-${mergedConfig.componentName}--${mergedConfig.variant}`);
56
- }
57
-
58
- // Apply initial styles
59
- if (mergedConfig.orientation === 'horizontal') {
60
- element.style.height = `${mergedConfig.thickness}px`;
61
- element.style.width = '100%';
62
-
63
- // Apply inset if needed
64
- if (mergedConfig.variant === 'inset' || mergedConfig.variant === 'middle-inset') {
65
- const insetStart = mergedConfig.insetStart !== undefined ? mergedConfig.insetStart : 16;
66
- const insetEnd = mergedConfig.insetEnd !== undefined ? mergedConfig.insetEnd :
67
- (mergedConfig.variant === 'middle-inset' ? 16 : 0);
68
-
69
- element.style.marginLeft = `${insetStart}px`;
70
- element.style.marginRight = `${insetEnd}px`;
71
- }
72
- } else {
73
- element.style.width = `${mergedConfig.thickness}px`;
74
- element.style.height = '100%';
75
-
76
- // Apply inset if needed
77
- if (mergedConfig.variant === 'inset' || mergedConfig.variant === 'middle-inset') {
78
- const insetStart = mergedConfig.insetStart !== undefined ? mergedConfig.insetStart : 16;
79
- const insetEnd = mergedConfig.insetEnd !== undefined ? mergedConfig.insetEnd :
80
- (mergedConfig.variant === 'middle-inset' ? 16 : 0);
81
-
82
- element.style.marginTop = `${insetStart}px`;
83
- element.style.marginBottom = `${insetEnd}px`;
84
- }
85
- }
86
-
87
- // Apply color if provided
88
- if (mergedConfig.color) {
89
- element.style.backgroundColor = mergedConfig.color;
90
- }
91
-
92
- // Create the divider instance
93
- const divider: DividerComponent = {
94
- element,
95
- config: mergedConfig,
96
-
97
- getClass: (name: string = '') => {
98
- return `${mergedConfig.prefix}-${mergedConfig.componentName}${name ? '--' + name : ''}`;
99
- },
100
-
101
- getOrientation: () => mergedConfig.orientation as 'horizontal' | 'vertical',
102
-
103
- setOrientation: (orientation: 'horizontal' | 'vertical') => {
104
- // Remove existing orientation class
105
- element.classList.remove(`${mergedConfig.prefix}-${mergedConfig.componentName}--${mergedConfig.orientation}`);
106
-
107
- // Update config
108
- mergedConfig.orientation = orientation;
109
-
110
- // Add new orientation class
111
- element.classList.add(`${mergedConfig.prefix}-${mergedConfig.componentName}--${orientation}`);
112
-
113
- // Update styles
114
- if (orientation === 'horizontal') {
115
- element.style.height = `${mergedConfig.thickness}px`;
116
- element.style.width = '100%';
117
-
118
- // Reset vertical margins
119
- if (mergedConfig.variant !== 'full-width') {
120
- element.style.marginTop = '';
121
- element.style.marginBottom = '';
122
-
123
- // Apply horizontal margins
124
- const insetStart = mergedConfig.insetStart !== undefined ? mergedConfig.insetStart : 16;
125
- const insetEnd = mergedConfig.insetEnd !== undefined ? mergedConfig.insetEnd :
126
- (mergedConfig.variant === 'middle-inset' ? 16 : 0);
127
-
128
- element.style.marginLeft = `${insetStart}px`;
129
- element.style.marginRight = `${insetEnd}px`;
130
- }
131
- } else {
132
- element.style.width = `${mergedConfig.thickness}px`;
133
- element.style.height = '100%';
134
-
135
- // Reset horizontal margins
136
- if (mergedConfig.variant !== 'full-width') {
137
- element.style.marginLeft = '';
138
- element.style.marginRight = '';
139
-
140
- // Apply vertical margins
141
- const insetStart = mergedConfig.insetStart !== undefined ? mergedConfig.insetStart : 16;
142
- const insetEnd = mergedConfig.insetEnd !== undefined ? mergedConfig.insetEnd :
143
- (mergedConfig.variant === 'middle-inset' ? 16 : 0);
144
-
145
- element.style.marginTop = `${insetStart}px`;
146
- element.style.marginBottom = `${insetEnd}px`;
147
- }
148
- }
149
-
150
- return divider;
151
- },
152
-
153
- getVariant: () => mergedConfig.variant as 'full-width' | 'inset' | 'middle-inset',
154
-
155
- setVariant: (variant: 'full-width' | 'inset' | 'middle-inset') => {
156
- // Remove existing variant class if not full-width
157
- if (mergedConfig.variant !== 'full-width') {
158
- element.classList.remove(`${mergedConfig.prefix}-${mergedConfig.componentName}--${mergedConfig.variant}`);
159
- }
160
-
161
- // Add new variant class if not full-width
162
- if (variant !== 'full-width') {
163
- element.classList.add(`${mergedConfig.prefix}-${mergedConfig.componentName}--${variant}`);
164
- }
165
-
166
- // Update config
167
- mergedConfig.variant = variant;
168
-
169
- // Update inset styles
170
- if (variant === 'full-width') {
171
- // Reset margins
172
- if (mergedConfig.orientation === 'horizontal') {
173
- element.style.marginLeft = '';
174
- element.style.marginRight = '';
175
- } else {
176
- element.style.marginTop = '';
177
- element.style.marginBottom = '';
178
- }
179
- } else {
180
- const insetStart = mergedConfig.insetStart !== undefined ? mergedConfig.insetStart : 16;
181
- const insetEnd = mergedConfig.insetEnd !== undefined ? mergedConfig.insetEnd :
182
- (variant === 'middle-inset' ? 16 : 0);
183
-
184
- if (mergedConfig.orientation === 'horizontal') {
185
- element.style.marginLeft = `${insetStart}px`;
186
- element.style.marginRight = `${insetEnd}px`;
187
- } else {
188
- element.style.marginTop = `${insetStart}px`;
189
- element.style.marginBottom = `${insetEnd}px`;
190
- }
191
- }
192
-
193
- return divider;
194
- },
195
-
196
- setInset: (insetStart?: number, insetEnd?: number) => {
197
- if (mergedConfig.variant !== 'full-width') {
198
- if (mergedConfig.orientation === 'horizontal') {
199
- if (insetStart !== undefined) {
200
- element.style.marginLeft = `${insetStart}px`;
201
- mergedConfig.insetStart = insetStart;
202
- }
203
-
204
- if (insetEnd !== undefined) {
205
- element.style.marginRight = `${insetEnd}px`;
206
- mergedConfig.insetEnd = insetEnd;
207
- }
208
- } else {
209
- if (insetStart !== undefined) {
210
- element.style.marginTop = `${insetStart}px`;
211
- mergedConfig.insetStart = insetStart;
212
- }
213
-
214
- if (insetEnd !== undefined) {
215
- element.style.marginBottom = `${insetEnd}px`;
216
- mergedConfig.insetEnd = insetEnd;
217
- }
218
- }
219
- }
220
-
221
- return divider;
222
- },
223
-
224
- setThickness: (thickness: number) => {
225
- mergedConfig.thickness = thickness;
226
-
227
- if (mergedConfig.orientation === 'horizontal') {
228
- element.style.height = `${thickness}px`;
229
- } else {
230
- element.style.width = `${thickness}px`;
231
- }
232
-
233
- return divider;
234
- },
235
-
236
- setColor: (color: string) => {
237
- mergedConfig.color = color;
238
- element.style.backgroundColor = color;
239
- return divider;
240
- }
241
- };
242
-
243
- return divider;
244
- };
245
-
246
- describe('Divider Component', () => {
247
- test('should create a divider element', () => {
248
- const divider = createMockDivider();
249
- expect(divider.element).toBeDefined();
250
- expect(divider.element.tagName).toBe('HR');
251
- expect(divider.element.className).toContain('mtrl-divider');
252
- });
253
-
254
- test('should apply custom class', () => {
255
- const customClass = 'custom-divider';
256
- const divider = createMockDivider({
257
- class: customClass
258
- });
259
-
260
- expect(divider.element.className).toContain(customClass);
261
- });
262
-
263
- test('should support horizontal orientation', () => {
264
- const divider = createMockDivider({
265
- orientation: 'horizontal'
266
- });
267
-
268
- expect(divider.element.className).toContain('mtrl-divider--horizontal');
269
- expect(divider.element.style.height).toBe('1px');
270
- expect(divider.element.style.width).toBe('100%');
271
- });
272
-
273
- test('should support vertical orientation', () => {
274
- const divider = createMockDivider({
275
- orientation: 'vertical'
276
- });
277
-
278
- expect(divider.element.className).toContain('mtrl-divider--vertical');
279
- expect(divider.element.style.width).toBe('1px');
280
- expect(divider.element.style.height).toBe('100%');
281
- });
282
-
283
- test('should support changing orientation', () => {
284
- const divider = createMockDivider({
285
- orientation: 'horizontal'
286
- });
287
-
288
- expect(divider.getOrientation()).toBe('horizontal');
289
-
290
- divider.setOrientation('vertical');
291
-
292
- expect(divider.getOrientation()).toBe('vertical');
293
- expect(divider.element.className).toContain('mtrl-divider--vertical');
294
- expect(divider.element.style.width).toBe('1px');
295
- expect(divider.element.style.height).toBe('100%');
296
- });
297
-
298
- test('should support full-width variant', () => {
299
- const divider = createMockDivider({
300
- variant: 'full-width'
301
- });
302
-
303
- expect(divider.getVariant()).toBe('full-width');
304
- expect(divider.element.style.marginLeft).toBe('');
305
- expect(divider.element.style.marginRight).toBe('');
306
- });
307
-
308
- test('should support inset variant', () => {
309
- const divider = createMockDivider({
310
- variant: 'inset'
311
- });
312
-
313
- expect(divider.getVariant()).toBe('inset');
314
- expect(divider.element.className).toContain('mtrl-divider--inset');
315
- expect(divider.element.style.marginLeft).toBe('16px');
316
- expect(divider.element.style.marginRight).toBe('0px');
317
- });
318
-
319
- test('should support middle-inset variant', () => {
320
- const divider = createMockDivider({
321
- variant: 'middle-inset'
322
- });
323
-
324
- expect(divider.getVariant()).toBe('middle-inset');
325
- expect(divider.element.className).toContain('mtrl-divider--middle-inset');
326
- expect(divider.element.style.marginLeft).toBe('16px');
327
- expect(divider.element.style.marginRight).toBe('16px');
328
- });
329
-
330
- test('should support changing variant', () => {
331
- const divider = createMockDivider({
332
- variant: 'full-width'
333
- });
334
-
335
- expect(divider.getVariant()).toBe('full-width');
336
-
337
- divider.setVariant('inset');
338
-
339
- expect(divider.getVariant()).toBe('inset');
340
- expect(divider.element.className).toContain('mtrl-divider--inset');
341
- expect(divider.element.style.marginLeft).toBe('16px');
342
- expect(divider.element.style.marginRight).toBe('0px');
343
- });
344
-
345
- test('should support custom inset values', () => {
346
- const divider = createMockDivider({
347
- variant: 'inset',
348
- insetStart: 24,
349
- insetEnd: 8
350
- });
351
-
352
- expect(divider.element.style.marginLeft).toBe('24px');
353
- expect(divider.element.style.marginRight).toBe('8px');
354
- });
355
-
356
- test('should support setting inset values', () => {
357
- const divider = createMockDivider({
358
- variant: 'inset'
359
- });
360
-
361
- divider.setInset(32, 16);
362
-
363
- expect(divider.element.style.marginLeft).toBe('32px');
364
- expect(divider.element.style.marginRight).toBe('16px');
365
- });
366
-
367
- test('should support setting thickness', () => {
368
- const divider = createMockDivider({
369
- orientation: 'horizontal'
370
- });
371
-
372
- expect(divider.element.style.height).toBe('1px');
373
-
374
- divider.setThickness(2);
375
-
376
- expect(divider.element.style.height).toBe('2px');
377
- });
378
-
379
- test('should support setting color', () => {
380
- const divider = createMockDivider();
381
-
382
- divider.setColor('#FF0000');
383
-
384
- // Different browsers may format colors differently (rgb vs hex)
385
- // We just need to verify the color was set to red, regardless of format
386
- const bgColor = divider.element.style.backgroundColor;
387
-
388
- // Check if it contains red components in any format
389
- expect(
390
- bgColor === '#FF0000' ||
391
- bgColor === 'rgb(255, 0, 0)' ||
392
- bgColor === 'rgba(255, 0, 0, 1)'
393
- ).toBe(true);
394
- });
395
-
396
- test('should handle orientation and variant together', () => {
397
- const divider = createMockDivider({
398
- orientation: 'horizontal',
399
- variant: 'inset'
400
- });
401
-
402
- expect(divider.element.style.marginLeft).toBe('16px');
403
- expect(divider.element.style.marginRight).toBe('0px');
404
-
405
- divider.setOrientation('vertical');
406
-
407
- expect(divider.element.style.marginLeft).toBe('');
408
- expect(divider.element.style.marginRight).toBe('');
409
- expect(divider.element.style.marginTop).toBe('16px');
410
- expect(divider.element.style.marginBottom).toBe('0px');
411
- });
412
- });