mtrl 0.3.1 → 0.3.3

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 (162) hide show
  1. package/.env +15 -0
  2. package/CONTRIBUTING.md +62 -23
  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/navigation/nav-item.ts +13 -2
  83. package/src/components/sheet/config.ts +1 -2
  84. package/src/components/sheet/features/gestures.ts +1 -1
  85. package/src/components/sheet/features/position.ts +1 -2
  86. package/src/components/sheet/features/state.ts +1 -1
  87. package/src/components/sheet/index.ts +10 -2
  88. package/src/components/sheet/sheet.ts +1 -2
  89. package/src/components/sheet/types.ts +29 -1
  90. package/src/components/slider/api.ts +1 -1
  91. package/src/components/slider/config.ts +1 -1
  92. package/src/components/slider/features/controller.ts +1 -1
  93. package/src/components/slider/features/handlers.ts +1 -1
  94. package/src/components/slider/features/states.ts +1 -1
  95. package/src/components/slider/index.ts +12 -5
  96. package/src/components/slider/schema.ts +1 -1
  97. package/src/components/slider/types.ts +31 -0
  98. package/src/components/tabs/tab-api.ts +1 -1
  99. package/src/components/tabs/types.ts +1 -1
  100. package/src/components/tooltip/api.ts +6 -2
  101. package/src/components/tooltip/config.ts +9 -28
  102. package/src/components/tooltip/index.ts +10 -1
  103. package/src/components/tooltip/types.ts +38 -3
  104. package/src/core/dom/create.ts +57 -51
  105. package/src/index.ts +129 -31
  106. package/src/styles/abstract/_mixins.scss +23 -9
  107. package/src/styles/abstract/_variables.scss +14 -4
  108. package/src/styles/components/_card.scss +1 -1
  109. package/src/styles/components/_chip.scss +323 -113
  110. package/src/styles/components/_tabs.scss +1 -1
  111. package/src/styles/themes/_autumn.scss +3 -0
  112. package/CLAUDE.md +0 -33
  113. package/src/components/checkbox/constants.ts +0 -37
  114. package/src/components/chip/chip-set.ts +0 -225
  115. package/src/components/chip/chip.ts +0 -118
  116. package/src/components/chip/constants.ts +0 -28
  117. package/src/components/chip/index.ts +0 -12
  118. package/src/components/list/constants.ts +0 -116
  119. package/src/components/sheet/constants.ts +0 -20
  120. package/src/components/slider/constants.ts +0 -32
  121. package/src/components/tooltip/constants.ts +0 -27
  122. package/test/components/badge.test.ts +0 -545
  123. package/test/components/bottom-app-bar.test.ts +0 -303
  124. package/test/components/button.test.ts +0 -233
  125. package/test/components/card.test.ts +0 -560
  126. package/test/components/carousel.test.ts +0 -951
  127. package/test/components/checkbox.test.ts +0 -462
  128. package/test/components/chip.test.ts +0 -692
  129. package/test/components/datepicker.test.ts +0 -1124
  130. package/test/components/dialog.test.ts +0 -990
  131. package/test/components/divider.test.ts +0 -412
  132. package/test/components/extended-fab.test.ts +0 -672
  133. package/test/components/fab.test.ts +0 -561
  134. package/test/components/list.test.ts +0 -365
  135. package/test/components/menu.test.ts +0 -718
  136. package/test/components/navigation.test.ts +0 -186
  137. package/test/components/progress.test.ts +0 -567
  138. package/test/components/radios.test.ts +0 -699
  139. package/test/components/search.test.ts +0 -1135
  140. package/test/components/segmented-button.test.ts +0 -732
  141. package/test/components/sheet.test.ts +0 -641
  142. package/test/components/slider.test.ts +0 -1220
  143. package/test/components/snackbar.test.ts +0 -461
  144. package/test/components/switch.test.ts +0 -452
  145. package/test/components/tabs.test.ts +0 -1369
  146. package/test/components/textfield.test.ts +0 -400
  147. package/test/components/timepicker.test.ts +0 -592
  148. package/test/components/tooltip.test.ts +0 -630
  149. package/test/components/top-app-bar.test.ts +0 -566
  150. package/test/core/dom.attributes.test.ts +0 -148
  151. package/test/core/dom.classes.test.ts +0 -152
  152. package/test/core/dom.events.test.ts +0 -243
  153. package/test/core/emitter.test.ts +0 -141
  154. package/test/core/ripple.test.ts +0 -99
  155. package/test/core/state.store.test.ts +0 -189
  156. package/test/core/utils.normalize.test.ts +0 -61
  157. package/test/core/utils.object.test.ts +0 -120
  158. package/test/setup.js +0 -371
  159. package/test/setup.ts +0 -451
  160. package/tsconfig.json +0 -22
  161. package/typedoc.json +0 -28
  162. 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
- });