npm - mtrl - Versions diffs - 0.2.9 → 0.3.1 - Mend

mtrl 0.2.9 → 0.3.1

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 (99) hide show

package/CLAUDE.md +33 -0
package/package.json +3 -1
package/src/components/button/button.ts +34 -5
package/src/components/navigation/index.ts +4 -1
package/src/components/navigation/system/core.ts +302 -0
package/src/components/navigation/system/events.ts +240 -0
package/src/components/navigation/system/index.ts +184 -0
package/src/components/navigation/system/mobile.ts +278 -0
package/src/components/navigation/system/state.ts +77 -0
package/src/components/navigation/system/types.ts +364 -0
package/src/components/navigation/types.ts +33 -0
package/src/components/slider/config.ts +2 -2
package/src/components/slider/features/controller.ts +1 -25
package/src/components/slider/features/handlers.ts +0 -1
package/src/components/slider/features/range.ts +7 -7
package/src/components/slider/{structure.ts → schema.ts} +2 -13
package/src/components/slider/slider.ts +3 -2
package/src/components/snackbar/index.ts +7 -1
package/src/components/snackbar/types.ts +25 -0
package/src/components/switch/api.ts +16 -0
package/src/components/switch/config.ts +1 -18
package/src/components/switch/features.ts +198 -0
package/src/components/switch/index.ts +6 -1
package/src/components/switch/switch.ts +3 -3
package/src/components/switch/types.ts +27 -2
package/src/components/textfield/index.ts +7 -1
package/src/components/textfield/types.ts +36 -0
package/src/core/composition/features/dom.ts +26 -14
package/src/core/composition/features/icon.ts +18 -18
package/src/core/composition/features/index.ts +3 -2
package/src/core/composition/features/label.ts +16 -17
package/src/core/composition/features/layout.ts +47 -0
package/src/core/composition/index.ts +4 -4
package/src/core/layout/README.md +350 -0
package/src/core/layout/array.ts +181 -0
package/src/core/layout/create.ts +55 -0
package/src/core/layout/index.ts +26 -0
package/src/core/layout/object.ts +124 -0
package/src/core/layout/processor.ts +58 -0
package/src/core/layout/result.ts +85 -0
package/src/core/layout/types.ts +125 -0
package/src/core/layout/utils.ts +136 -0
package/src/styles/abstract/_variables.scss +28 -0
package/src/styles/components/_switch.scss +133 -69
package/src/styles/components/_textfield.scss +9 -16
package/test/components/badge.test.ts +545 -0
package/test/components/bottom-app-bar.test.ts +303 -0
package/test/components/button.test.ts +233 -0
package/test/components/card.test.ts +560 -0
package/test/components/carousel.test.ts +951 -0
package/test/components/checkbox.test.ts +462 -0
package/test/components/chip.test.ts +692 -0
package/test/components/datepicker.test.ts +1124 -0
package/test/components/dialog.test.ts +990 -0
package/test/components/divider.test.ts +412 -0
package/test/components/extended-fab.test.ts +672 -0
package/test/components/fab.test.ts +561 -0
package/test/components/list.test.ts +365 -0
package/test/components/menu.test.ts +718 -0
package/test/components/navigation.test.ts +186 -0
package/test/components/progress.test.ts +567 -0
package/test/components/radios.test.ts +699 -0
package/test/components/search.test.ts +1135 -0
package/test/components/segmented-button.test.ts +732 -0
package/test/components/sheet.test.ts +641 -0
package/test/components/slider.test.ts +1220 -0
package/test/components/snackbar.test.ts +461 -0
package/test/components/switch.test.ts +452 -0
package/test/components/tabs.test.ts +1369 -0
package/test/components/textfield.test.ts +400 -0
package/test/components/timepicker.test.ts +592 -0
package/test/components/tooltip.test.ts +630 -0
package/test/components/top-app-bar.test.ts +566 -0
package/test/core/dom.attributes.test.ts +148 -0
package/test/core/dom.classes.test.ts +152 -0
package/test/core/dom.events.test.ts +243 -0
package/test/core/emitter.test.ts +141 -0
package/test/core/ripple.test.ts +99 -0
package/test/core/state.store.test.ts +189 -0
package/test/core/utils.normalize.test.ts +61 -0
package/test/core/utils.object.test.ts +120 -0
package/test/setup.ts +451 -0
package/tsconfig.json +2 -2
package/src/components/navigation/system-types.ts +0 -124
package/src/components/navigation/system.ts +0 -776
package/src/components/snackbar/constants.ts +0 -26
package/src/core/composition/features/structure.ts +0 -22
package/src/core/layout/index.js +0 -95
package/src/core/structure.ts +0 -288
package/test/components/button.test.js +0 -170
package/test/components/checkbox.test.js +0 -238
package/test/components/list.test.js +0 -105
package/test/components/menu.test.js +0 -385
package/test/components/navigation.test.js +0 -227
package/test/components/snackbar.test.js +0 -234
package/test/components/switch.test.js +0 -186
package/test/components/textfield.test.js +0 -314
package/test/core/emitter.test.js +0 -141
package/test/core/ripple.test.js +0 -66

package/test/core/dom.classes.test.ts ADDED Viewed

@@ -0,0 +1,152 @@
+// test/core/dom.classes.test.ts
+import { describe, test, expect, beforeAll, afterAll } from 'bun:test';
+import { JSDOM } from 'jsdom';
+import { addClass, removeClass, toggleClass, hasClass } from '../../src/core/dom/classes';
+// Setup jsdom environment
+let dom: JSDOM;
+let window: Window;
+let document: Document;
+let originalGlobalDocument: any;
+let originalGlobalWindow: any;
+beforeAll(() => {
+  // Create a new JSDOM instance
+  dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
+    url: 'http://localhost/',
+    pretendToBeVisual: true
+  });
+  // Get window and document from jsdom
+  window = dom.window;
+  document = window.document;
+  // Store original globals
+  originalGlobalDocument = global.document;
+  originalGlobalWindow = global.window;
+  // Set globals to use jsdom
+  global.document = document;
+  global.window = window;
+  global.Element = window.Element;
+  global.HTMLElement = window.HTMLElement;
+});
+afterAll(() => {
+  // Restore original globals
+  global.document = originalGlobalDocument;
+  global.window = originalGlobalWindow;
+  // Clean up jsdom
+  window.close();
+});
+describe('DOM Classes Utilities', () => {
+  test('should add a single class', () => {
+    const element = document.createElement('div');
+    addClass(element, 'test');
+    expect(element.classList.contains('test')).toBe(true);
+  });
+  test('should add multiple classes', () => {
+    const element = document.createElement('div');
+    addClass(element, 'test1', 'test2', 'test3');
+    expect(element.classList.contains('test1')).toBe(true);
+    expect(element.classList.contains('test2')).toBe(true);
+    expect(element.classList.contains('test3')).toBe(true);
+  });
+  test('should add classes from an array', () => {
+    const element = document.createElement('div');
+    addClass(element, ['test1', 'test2', 'test3']);
+    expect(element.classList.contains('test1')).toBe(true);
+    expect(element.classList.contains('test2')).toBe(true);
+    expect(element.classList.contains('test3')).toBe(true);
+  });
+  test('should add classes from space-separated strings', () => {
+    const element = document.createElement('div');
+    addClass(element, 'test1 test2', 'test3');
+    expect(element.classList.contains('test1')).toBe(true);
+    expect(element.classList.contains('test2')).toBe(true);
+    expect(element.classList.contains('test3')).toBe(true);
+  });
+  test('should not add empty classes', () => {
+    const element = document.createElement('div');
+    addClass(element, '', '  ', 'test');
+    expect(element.classList.contains('')).toBe(false);
+    expect(element.classList.contains('  ')).toBe(false);
+    expect(element.classList.contains('test')).toBe(true);
+    expect(element.className).toBe('test');
+  });
+  test('should remove a single class', () => {
+    const element = document.createElement('div');
+    element.classList.add('test');
+    removeClass(element, 'test');
+    expect(element.classList.contains('test')).toBe(false);
+  });
+  test('should remove multiple classes', () => {
+    const element = document.createElement('div');
+    element.classList.add('test1', 'test2', 'test3');
+    removeClass(element, 'test1', 'test3');
+    expect(element.classList.contains('test1')).toBe(false);
+    expect(element.classList.contains('test2')).toBe(true);
+    expect(element.classList.contains('test3')).toBe(false);
+  });
+  test('should remove classes from an array', () => {
+    const element = document.createElement('div');
+    element.classList.add('test1', 'test2', 'test3');
+    removeClass(element, ['test1', 'test3']);
+    expect(element.classList.contains('test1')).toBe(false);
+    expect(element.classList.contains('test2')).toBe(true);
+    expect(element.classList.contains('test3')).toBe(false);
+  });
+  test('should toggle a single class', () => {
+    const element = document.createElement('div');
+    toggleClass(element, 'test');
+    expect(element.classList.contains('test')).toBe(true);
+    toggleClass(element, 'test');
+    expect(element.classList.contains('test')).toBe(false);
+  });
+  test('should toggle multiple classes', () => {
+    const element = document.createElement('div');
+    toggleClass(element, 'test1', 'test2');
+    expect(element.classList.contains('test1')).toBe(true);
+    expect(element.classList.contains('test2')).toBe(true);
+    toggleClass(element, 'test1', 'test3');
+    expect(element.classList.contains('test1')).toBe(false);
+    expect(element.classList.contains('test2')).toBe(true);
+    expect(element.classList.contains('test3')).toBe(true);
+  });
+  test('should check if element has a class', () => {
+    const element = document.createElement('div');
+    element.classList.add('test1', 'test2');
+    expect(hasClass(element, 'test1')).toBe(true);
+    expect(hasClass(element, 'test3')).toBe(false);
+  });
+  test('should check if element has multiple classes', () => {
+    const element = document.createElement('div');
+    element.classList.add('test1', 'test2', 'test3');
+    expect(hasClass(element, 'test1', 'test2')).toBe(true);
+    expect(hasClass(element, 'test1', 'test4')).toBe(false);
+  });
+  test('should return the element from modifier functions', () => {
+    const element = document.createElement('div');
+    const result1 = addClass(element, 'test');
+    const result2 = removeClass(element, 'test');
+    const result3 = toggleClass(element, 'test');
+    expect(result1).toBe(element);
+    expect(result2).toBe(element);
+    expect(result3).toBe(element);
+  });
+});

package/test/core/dom.events.test.ts ADDED Viewed

@@ -0,0 +1,243 @@
+// test/core/dom.events.test.ts
+import { describe, test, expect, mock, beforeAll, afterAll } from 'bun:test';
+import { JSDOM } from 'jsdom';
+import { createEventManager } from '../../src/core/dom/events';
+// Setup jsdom environment
+let dom: JSDOM;
+let window: Window;
+let document: Document;
+let originalGlobalDocument: any;
+let originalGlobalWindow: any;
+let originalConsoleError: any;
+let originalConsoleWarn: any;
+beforeAll(() => {
+  // Create a new JSDOM instance
+  dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
+    url: 'http://localhost/',
+    pretendToBeVisual: true
+  });
+  // Get window and document from jsdom
+  window = dom.window;
+  document = window.document;
+  // Store original globals
+  originalGlobalDocument = global.document;
+  originalGlobalWindow = global.window;
+  originalConsoleError = console.error;
+  originalConsoleWarn = console.warn;
+  // Set globals to use jsdom
+  global.document = document;
+  global.window = window;
+  global.Element = window.Element;
+  global.HTMLElement = window.HTMLElement;
+  global.Event = window.Event;
+  // Mock console methods
+  console.error = mock(() => {});
+  console.warn = mock(() => {});
+});
+afterAll(() => {
+  // Restore original globals
+  global.document = originalGlobalDocument;
+  global.window = originalGlobalWindow;
+  console.error = originalConsoleError;
+  console.warn = originalConsoleWarn;
+  // Clean up jsdom
+  window.close();
+});
+describe('DOM Events Manager', () => {
+  test('should create an event manager', () => {
+    const element = document.createElement('div');
+    const manager = createEventManager(element);
+    expect(manager).toBeDefined();
+    expect(typeof manager.on).toBe('function');
+    expect(typeof manager.off).toBe('function');
+    expect(typeof manager.pause).toBe('function');
+    expect(typeof manager.resume).toBe('function');
+    expect(typeof manager.destroy).toBe('function');
+    expect(typeof manager.getHandlers).toBe('function');
+    expect(typeof manager.hasHandler).toBe('function');
+  });
+  test('should add event listener', () => {
+    const element = document.createElement('div');
+    const manager = createEventManager(element);
+    const handler = mock(() => {});
+    manager.on('click', handler);
+    // Trigger the event
+    element.dispatchEvent(new Event('click'));
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(manager.hasHandler('click', handler)).toBe(true);
+  });
+  test('should remove event listener', () => {
+    const element = document.createElement('div');
+    const manager = createEventManager(element);
+    const handler = mock(() => {});
+    manager.on('click', handler);
+    manager.off('click', handler);
+    // Trigger the event
+    element.dispatchEvent(new Event('click'));
+    expect(handler).toHaveBeenCalledTimes(0);
+    expect(manager.hasHandler('click', handler)).toBe(false);
+  });
+  test('should handle multiple event listeners', () => {
+    const element = document.createElement('div');
+    const manager = createEventManager(element);
+    const clickHandler = mock(() => {});
+    const mouseoverHandler = mock(() => {});
+    manager.on('click', clickHandler);
+    manager.on('mouseover', mouseoverHandler);
+    // Trigger events
+    element.dispatchEvent(new Event('click'));
+    element.dispatchEvent(new Event('mouseover'));
+    expect(clickHandler).toHaveBeenCalledTimes(1);
+    expect(mouseoverHandler).toHaveBeenCalledTimes(1);
+    expect(manager.hasHandler('click', clickHandler)).toBe(true);
+    expect(manager.hasHandler('mouseover', mouseoverHandler)).toBe(true);
+  });
+  test('should pause and resume all event listeners', () => {
+    const element = document.createElement('div');
+    const manager = createEventManager(element);
+    const handler = mock(() => {});
+    manager.on('click', handler);
+    // Pause events
+    manager.pause();
+    // Trigger event (should not call handler)
+    element.dispatchEvent(new Event('click'));
+    expect(handler).toHaveBeenCalledTimes(0);
+    // Resume events
+    manager.resume();
+    // Trigger event (should call handler)
+    element.dispatchEvent(new Event('click'));
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+  test('should destroy all event listeners', () => {
+    const element = document.createElement('div');
+    const manager = createEventManager(element);
+    const clickHandler = mock(() => {});
+    const mouseoverHandler = mock(() => {});
+    manager.on('click', clickHandler);
+    manager.on('mouseover', mouseoverHandler);
+    // Destroy all handlers
+    manager.destroy();
+    // Trigger events
+    element.dispatchEvent(new Event('click'));
+    element.dispatchEvent(new Event('mouseover'));
+    expect(clickHandler).toHaveBeenCalledTimes(0);
+    expect(mouseoverHandler).toHaveBeenCalledTimes(0);
+    expect(manager.hasHandler('click', clickHandler)).toBe(false);
+    expect(manager.hasHandler('mouseover', mouseoverHandler)).toBe(false);
+    expect(manager.getHandlers().size).toBe(0);
+  });
+  test('should provide access to all handlers', () => {
+    const element = document.createElement('div');
+    const manager = createEventManager(element);
+    const clickHandler = mock(() => {});
+    const mouseoverHandler = mock(() => {});
+    manager.on('click', clickHandler);
+    manager.on('mouseover', mouseoverHandler);
+    const handlers = manager.getHandlers();
+    expect(handlers.size).toBe(2);
+    // Check first handler keys (can't check exact values since the Map keys are generated)
+    const keys = Array.from(handlers.keys());
+    expect(keys.length).toBe(2);
+    expect(keys[0]).toContain('click_');
+    expect(keys[1]).toContain('mouseover_');
+    // Check entries have expected properties
+    const firstEntry = handlers.get(keys[0]);
+    expect(firstEntry).toBeDefined();
+    if (firstEntry) {
+      expect(firstEntry.event).toBe('click');
+      expect(firstEntry.original).toBe(clickHandler);
+      expect(typeof firstEntry.enhanced).toBe('function');
+    }
+  });
+  test('should support event listener options', () => {
+    const element = document.createElement('div');
+    const manager = createEventManager(element);
+    const handler = mock(() => {});
+    const options = { once: true };
+    manager.on('click', handler, options);
+    // Trigger event twice
+    element.dispatchEvent(new Event('click'));
+    element.dispatchEvent(new Event('click'));
+    // Handler should only be called once due to { once: true }
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+  test('should catch errors in event handlers', () => {
+    const element = document.createElement('div');
+    const manager = createEventManager(element);
+    const errorHandler = () => {
+      throw new Error('Test error');
+    };
+    // Add handler that throws
+    manager.on('click', errorHandler);
+    // Should not throw when dispatching the event
+    expect(() => {
+      element.dispatchEvent(new Event('click'));
+    }).not.toThrow();
+    // Console.error should have been called
+    expect(console.error).toHaveBeenCalledTimes(1);
+  });
+  test('should chain method calls', () => {
+    const element = document.createElement('div');
+    const manager = createEventManager(element);
+    const handler1 = mock(() => {});
+    const handler2 = mock(() => {});
+    // Chain methods
+    manager
+      .on('click', handler1)
+      .on('mouseover', handler2)
+      .off('mouseover', handler2);
+    // Check results
+    expect(manager.hasHandler('click', handler1)).toBe(true);
+    expect(manager.hasHandler('mouseover', handler2)).toBe(false);
+  });
+});

package/test/core/emitter.test.ts ADDED Viewed

@@ -0,0 +1,141 @@
+// test/core/emitter.test.ts
+import { describe, test, expect, mock } from 'bun:test';
+import { createEmitter } from '../../src/core/state/emitter';
+describe('Event Emitter', () => {
+  test('should create an emitter with expected methods', () => {
+    const emitter = createEmitter();
+    expect(emitter).toBeDefined();
+    expect(emitter.on).toBeInstanceOf(Function);
+    expect(emitter.off).toBeInstanceOf(Function);
+    expect(emitter.emit).toBeInstanceOf(Function);
+    expect(emitter.clear).toBeInstanceOf(Function);
+  });
+  test('should register event handlers with on()', () => {
+    const emitter = createEmitter();
+    const handler = mock(() => {});
+    const unsubscribe = emitter.on('test', handler);
+    expect(unsubscribe).toBeInstanceOf(Function);
+  });
+  test('should invoke handlers when event is emitted', () => {
+    const emitter = createEmitter();
+    const handler1 = mock(() => {});
+    const handler2 = mock(() => {});
+    const eventData = { foo: 'bar' };
+    emitter.on('test', handler1);
+    emitter.on('test', handler2);
+    emitter.emit('test', eventData);
+    expect(handler1).toHaveBeenCalledTimes(1);
+    expect(handler1).toHaveBeenCalledWith(eventData);
+    expect(handler2).toHaveBeenCalledTimes(1);
+    expect(handler2).toHaveBeenCalledWith(eventData);
+  });
+  test('should remove handlers with off()', () => {
+    const emitter = createEmitter();
+    const handler = mock(() => {});
+    emitter.on('test', handler);
+    emitter.off('test', handler);
+    emitter.emit('test');
+    expect(handler).not.toHaveBeenCalled();
+  });
+  test('should remove specific handlers while keeping others', () => {
+    const emitter = createEmitter();
+    const handler1 = mock(() => {});
+    const handler2 = mock(() => {});
+    emitter.on('test', handler1);
+    emitter.on('test', handler2);
+    emitter.off('test', handler1);
+    emitter.emit('test');
+    expect(handler1).not.toHaveBeenCalled();
+    expect(handler2).toHaveBeenCalledTimes(1);
+  });
+  test('should unsubscribe handlers using the returned function', () => {
+    const emitter = createEmitter();
+    const handler = mock(() => {});
+    const unsubscribe = emitter.on('test', handler);
+    unsubscribe();
+    emitter.emit('test');
+    expect(handler).not.toHaveBeenCalled();
+  });
+  test('should support multiple event types', () => {
+    const emitter = createEmitter();
+    const handler1 = mock(() => {});
+    const handler2 = mock(() => {});
+    emitter.on('event1', handler1);
+    emitter.on('event2', handler2);
+    emitter.emit('event1');
+    expect(handler1).toHaveBeenCalledTimes(1);
+    expect(handler2).not.toHaveBeenCalled();
+    emitter.emit('event2');
+    expect(handler1).toHaveBeenCalledTimes(1);
+    expect(handler2).toHaveBeenCalledTimes(1);
+  });
+  test('should clear all event handlers', () => {
+    const emitter = createEmitter();
+    const handler1 = mock(() => {});
+    const handler2 = mock(() => {});
+    emitter.on('event1', handler1);
+    emitter.on('event2', handler2);
+    emitter.clear();
+    emitter.emit('event1');
+    emitter.emit('event2');
+    expect(handler1).not.toHaveBeenCalled();
+    expect(handler2).not.toHaveBeenCalled();
+  });
+  test('should pass multiple arguments to handlers', () => {
+    const emitter = createEmitter();
+    const handler = mock(() => {});
+    emitter.on('test', handler);
+    const arg1 = { id: 1 };
+    const arg2 = 'string';
+    const arg3 = [1, 2, 3];
+    emitter.emit('test', arg1, arg2, arg3);
+    expect(handler).toHaveBeenCalledWith(arg1, arg2, arg3);
+  });
+  test('should do nothing when emitting event with no handlers', () => {
+    const emitter = createEmitter();
+    // This should not throw
+    expect(() => {
+      emitter.emit('nonexistent');
+    }).not.toThrow();
+  });
+});

package/test/core/ripple.test.ts ADDED Viewed

@@ -0,0 +1,99 @@
+// test/core/ripple.test.ts
+import { describe, test, expect, mock, beforeAll, afterAll } from 'bun:test';
+import { JSDOM } from 'jsdom';
+import { createRipple } from '../../src/core/build/ripple';
+// Setup jsdom environment
+let dom: JSDOM;
+let window: Window;
+let document: Document;
+let originalGlobalDocument: any;
+let originalGlobalWindow: any;
+beforeAll(() => {
+  // Create a new JSDOM instance
+  dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
+    url: 'http://localhost/',
+    pretendToBeVisual: true
+  });
+  // Get window and document from jsdom
+  window = dom.window;
+  document = window.document;
+  // Store original globals
+  originalGlobalDocument = global.document;
+  originalGlobalWindow = global.window;
+  // Set globals to use jsdom
+  global.document = document;
+  global.window = window;
+  global.Element = window.Element;
+  global.HTMLElement = window.HTMLElement;
+  global.Event = window.Event;
+});
+afterAll(() => {
+  // Restore original globals
+  global.document = originalGlobalDocument;
+  global.window = originalGlobalWindow;
+  // Clean up jsdom
+  window.close();
+});
+describe('Ripple Effect', () => {
+  test('should create a ripple controller', () => {
+    const ripple = createRipple();
+    expect(ripple).toBeDefined();
+    expect(typeof ripple.mount).toBe('function');
+    expect(typeof ripple.unmount).toBe('function');
+  });
+  test('should mount ripple effect to an element', () => {
+    const ripple = createRipple();
+    const element = document.createElement('div');
+    // Mount ripple to element
+    ripple.mount(element);
+    // Just verify that the mount function doesn't throw
+    // The actual style changes may vary based on implementation
+    expect(true).toBe(true);
+  });
+  test('should not fail when mounting to a null element', () => {
+    const ripple = createRipple();
+    expect(() => ripple.mount(null as any)).not.toThrow();
+  });
+  test('should create ripple element on mousedown', () => {
+    // Skip this test as it requires more advanced DOM mocking
+    // than we currently have available
+    console.log('Skipping "should create ripple element on mousedown" test - requires advanced DOM mocking');
+  });
+  test('should add document cleanup event listeners', () => {
+    // Skip this test as it requires more advanced DOM mocking
+    // than we currently have available
+    console.log('Skipping "should add document cleanup event listeners" test - requires advanced DOM mocking');
+  });
+  test('should remove ripple elements on unmount', () => {
+    const ripple = createRipple();
+    const element = document.createElement('div');
+    // Mount and then unmount
+    ripple.mount(element);
+    ripple.unmount(element);
+    // Just verify that the unmount function doesn't throw
+    // The actual DOM changes may vary based on implementation
+    expect(true).toBe(true);
+  });
+  test('should not fail when unmounting a null element', () => {
+    const ripple = createRipple();
+    expect(() => ripple.unmount(null as any)).not.toThrow();
+  });
+});