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/navigation.test.ts DELETED
@@ -1,186 +0,0 @@
1
- // test/components/navigation.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
-
12
- // Import navigation types directly
13
- import type { NavigationComponent, NavItemConfig, NavItemData, NavVariant, NavPosition } from '../../src/components/navigation/types';
14
-
15
- // Define constants here to avoid circular dependencies
16
- const NAV_VARIANTS: Record<string, NavVariant> = {
17
- RAIL: 'rail',
18
- DRAWER: 'drawer',
19
- BAR: 'bar',
20
- MODAL: 'modal',
21
- STANDARD: 'standard'
22
- };
23
-
24
- const NAV_POSITIONS: Record<string, NavPosition> = {
25
- LEFT: 'left',
26
- RIGHT: 'right',
27
- TOP: 'top',
28
- BOTTOM: 'bottom'
29
- };
30
-
31
- // Sample items for testing
32
- const testItems: NavItemConfig[] = [
33
- {
34
- id: 'home',
35
- icon: '<svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>',
36
- label: 'Home'
37
- },
38
- {
39
- id: 'favorites',
40
- icon: '<svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>',
41
- label: 'Favorites'
42
- },
43
- {
44
- id: 'settings',
45
- icon: '<svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>',
46
- label: 'Settings'
47
- }
48
- ];
49
-
50
- // Create a simple mock navigation
51
- const createMockNavigation = (config = {}): NavigationComponent => {
52
- const element = document.createElement('nav');
53
- element.className = `mtrl-nav mtrl-nav--${config.variant || 'rail'}`;
54
-
55
- if (config.class) {
56
- element.className += ` ${config.class}`;
57
- }
58
-
59
- // Create basic items map
60
- const items = new Map();
61
-
62
- if (config.items) {
63
- (config.items as NavItemConfig[]).forEach(itemConfig => {
64
- const itemElement = document.createElement('button');
65
- itemElement.className = 'mtrl-nav-item';
66
- itemElement.dataset.id = itemConfig.id;
67
-
68
- items.set(itemConfig.id, {
69
- element: itemElement,
70
- config: itemConfig
71
- });
72
- });
73
- }
74
-
75
- return {
76
- element,
77
- items,
78
- config: {
79
- variant: config.variant || 'rail',
80
- position: config.position || 'left',
81
- disabled: config.disabled || false,
82
- ...config
83
- },
84
- addItem: () => ({ element, items, config } as any),
85
- removeItem: () => ({ element, items, config } as any),
86
- getItem: (id) => items.get(id),
87
- getAllItems: () => Array.from(items.values()),
88
- getActive: () => null,
89
- getItemPath: () => [],
90
- setActive: () => ({ element, items, config } as any),
91
- enable: () => ({ element, items, config } as any),
92
- disable: () => ({ element, items, config } as any),
93
- expand: () => ({ element, items, config } as any),
94
- collapse: () => ({ element, items, config } as any),
95
- isExpanded: () => false,
96
- toggle: () => ({ element, items, config } as any),
97
- on: () => ({ element, items, config } as any),
98
- off: () => ({ element, items, config } as any),
99
- destroy: () => {
100
- if (element.parentNode) {
101
- element.parentNode.removeChild(element);
102
- }
103
- }
104
- } as NavigationComponent;
105
- };
106
-
107
- describe('Navigation Component', () => {
108
- test('should create a navigation element', () => {
109
- const nav = createMockNavigation();
110
- expect(nav.element).toBeDefined();
111
- expect(nav.element.tagName).toBe('NAV');
112
- expect(nav.element.className).toContain('mtrl-nav');
113
- });
114
-
115
- test('should apply variant class', () => {
116
- const variant = NAV_VARIANTS.RAIL;
117
- const nav = createMockNavigation({
118
- variant
119
- });
120
- expect(nav.config.variant).toBe(variant);
121
- });
122
-
123
- test('should apply position class', () => {
124
- const position = NAV_POSITIONS.LEFT;
125
- const nav = createMockNavigation({
126
- position
127
- });
128
- expect(nav.config.position).toBe(position);
129
- });
130
-
131
- test('should add initial items', () => {
132
- const nav = createMockNavigation({
133
- items: testItems
134
- });
135
- expect(nav.items).toBeDefined();
136
- expect(nav.items.size).toBe(testItems.length);
137
-
138
- // Check first item details
139
- const homeItem = nav.getItem('home');
140
- expect(homeItem).toBeDefined();
141
- expect(homeItem?.config.label).toBe('Home');
142
- });
143
-
144
- test('should add item dynamically', () => {
145
- const nav = createMockNavigation();
146
- const newItem: NavItemConfig = {
147
- id: 'profile',
148
- icon: '<svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>',
149
- label: 'Profile'
150
- };
151
-
152
- expect(typeof nav.addItem).toBe('function');
153
- });
154
-
155
- test('should support disabled state', () => {
156
- const nav = createMockNavigation();
157
- expect(typeof nav.disable).toBe('function');
158
- expect(typeof nav.enable).toBe('function');
159
-
160
- const disabledNav = createMockNavigation({ disabled: true });
161
- expect(disabledNav.config.disabled).toBe(true);
162
- });
163
-
164
- test('should register event handlers', () => {
165
- const nav = createMockNavigation();
166
- expect(typeof nav.on).toBe('function');
167
- expect(typeof nav.off).toBe('function');
168
- });
169
-
170
- test('should apply custom class', () => {
171
- const customClass = 'custom-nav';
172
- const nav = createMockNavigation({
173
- class: customClass
174
- });
175
- expect(nav.element.className).toContain(customClass);
176
- });
177
-
178
- test('should properly clean up resources on destroy', () => {
179
- const nav = createMockNavigation();
180
- const parentElement = document.createElement('div');
181
- parentElement.appendChild(nav.element);
182
-
183
- nav.destroy();
184
- expect(parentElement.children.length).toBe(0);
185
- });
186
- });