ripple 0.3.20 → 0.3.22

package/tests/client/css/global-edge-cases.test.tsrx

@@ -36,7 +36,7 @@ export component Test() {
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('[data-test] {');
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+\[data-foo="bar"\]/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+\[data-foo="bar"\]/);
 	});
 
 	it('handles :global with universal selector', () => {
@@ -57,7 +57,7 @@ export component Test() {
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('* {');
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ \* {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ \* {/);
 	});
 
 	it('handles :global with ID selectors', () => {
@@ -78,9 +78,9 @@ export component Test() {
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('#app {');
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ #test {/);
-		expect(css).not.toMatch(/#app\.ripple-[a-z0-9]+/);
-		expect(css).not.toMatch(/#test\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ #test {/);
+		expect(css).not.toMatch(/#app\.tsrx-[a-z0-9]+/);
+		expect(css).not.toMatch(/#test\.tsrx-[a-z0-9]+/);
 	});
 
 	it('handles :global with pseudo-elements', () => {
@@ -102,7 +102,7 @@ export component Test() {
 
 		expect(css).toContain('div::before {');
 		``;
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ span::after {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ span::after {/);
 	});
 
 	it('handles empty :global blocks', () => {
@@ -121,7 +121,7 @@ export component Test() {
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('color: red');
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
 	});
 
 	it('handles :global with complex selector chains', () => {
@@ -145,8 +145,8 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.container > span.wrapper\.ripple-[a-z0-9]+ \+ button\[disabled\] {/);
-		expect(css).toMatch(/\.foo > \.bar span\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/div\.container > span.wrapper\.tsrx-[a-z0-9]+ \+ button\[disabled\] {/);
+		expect(css).toMatch(/\.foo > \.bar span\.tsrx-[a-z0-9]+ {/);
 	});
 
 	it('rejects :global in the middle of a selector sequence', () => {
@@ -193,8 +193,8 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/html div\.ripple-[a-z0-9]+ span:where\(\.ripple-[a-z0-9]+\) {/);
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ span:where\(\.ripple-[a-z0-9]+\) strong {/);
-		expect(css).toMatch(/body div\.ripple-[a-z0-9]+ em {/);
+		expect(css).toMatch(/html div\.tsrx-[a-z0-9]+ span:where\(\.tsrx-[a-z0-9]+\) {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ span:where\(\.tsrx-[a-z0-9]+\) strong {/);
+		expect(css).toMatch(/body div\.tsrx-[a-z0-9]+ em {/);
 	});
 });

package/tests/client/css/global-keyframes.test.tsrx

@@ -38,7 +38,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/@keyframes ripple-[a-z0-9]+-foo/);
+		expect(css).toMatch(/@keyframes tsrx-[a-z0-9]+-foo/);
 	});
 
 	it('handles mix of global and scoped keyframes', () => {
@@ -71,9 +71,9 @@ export component Test() {
 
 		expect(css).toContain('@keyframes fadeIn');
 		expect(css).not.toContain('-global-fadeIn');
-		expect(css).toMatch(/@keyframes ripple-[a-z0-9]+-slideIn/);
-		expect(css).toMatch(/\.scoped-anim\.ripple-[a-z0-9]+/);
-		expect(css).toMatch(/\.global-anim\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/@keyframes tsrx-[a-z0-9]+-slideIn/);
+		expect(css).toMatch(/\.scoped-anim\.tsrx-[a-z0-9]+/);
+		expect(css).toMatch(/\.global-anim\.tsrx-[a-z0-9]+/);
 	});
 
 	it('handles multiple animations with global keyframes', () => {
@@ -137,20 +137,20 @@ component Child() {
 		const { css } = compile(source, 'test.tsrx');
 
 		// Parent should have scoped slideIn and global fadeIn
-		expect(css).toMatch(/@keyframes ripple-[a-z0-9]+-slideIn/);
+		expect(css).toMatch(/@keyframes tsrx-[a-z0-9]+-slideIn/);
 		expect(css).toContain('@keyframes fadeIn');
 		expect(css).not.toContain('-global-fadeIn');
 
 		// Parent .parent should reference scoped slideIn
 		expect(css).toMatch(
-			/\.parent\.ripple-[a-z0-9]+\s*{[\s\S]*?animation:\s*ripple-[a-z0-9]+-slideIn 1s/,
+			/\.parent\.tsrx-[a-z0-9]+\s*{[\s\S]*?animation:\s*tsrx-[a-z0-9]+-slideIn 1s/,
 		);
 
 		// .parent should NOT be marked as unused
 		expect(css).not.toContain('(unused) .parent');
 
 		// Child .child should reference global fadeIn
-		expect(css).toMatch(/\.child\.ripple-[a-z0-9]+\s*{[\s\S]*?animation:\s*fadeIn 3s/);
+		expect(css).toMatch(/\.child\.tsrx-[a-z0-9]+\s*{[\s\S]*?animation:\s*fadeIn 3s/);
 
 		// .child should NOT be marked as unused
 		expect(css).not.toContain('(unused) .child');

package/tests/client/css/global-nested.test.tsrx

@@ -34,12 +34,12 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
 		expect(css).toContain('.x {');
 		expect(css).toContain('.y {');
-		expect(css).not.toMatch(/\.x\.ripple-[a-z0-9]+/);
-		expect(css).not.toMatch(/\.y\.ripple-[a-z0-9]+/);
-		expect(css).toMatch(/p\.ripple-[a-z0-9]+ \.y {/);
+		expect(css).not.toMatch(/\.x\.tsrx-[a-z0-9]+/);
+		expect(css).not.toMatch(/\.y\.tsrx-[a-z0-9]+/);
+		expect(css).toMatch(/p\.tsrx-[a-z0-9]+ \.y {/);
 	});
 
 	it('handles :global with nesting selector', () => {
@@ -70,7 +70,7 @@ export component Test() {
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('&.x {');
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+\.x {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+\.x {/);
 	});
 
 	it('handles global block with de-nested syntax', () => {
@@ -96,7 +96,7 @@ export component Test() {
 
 		expect(css).toContain('div {');
 		expect(css).toContain('.y {');
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ p {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ p {/);
 	});
 
 	it('handles global local nested combinations', () => {
@@ -121,8 +121,8 @@ export component Test() {
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.whatever {');
-		expect(css).not.toMatch(/\.whatever\.ripple-[a-z0-9]+ {/);
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ {/);
+		expect(css).not.toMatch(/\.whatever\.tsrx-[a-z0-9]+ {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
 	});
 
 	it('handles :global with :is and :where pseudoclasses', () => {
@@ -144,7 +144,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ :is\(span\) {/);
-		expect(css).toMatch(/\.foo :is\(div\.ripple-[a-z0-9]+\) {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ :is\(span\) {/);
+		expect(css).toMatch(/\.foo :is\(div\.tsrx-[a-z0-9]+\) {/);
 	});
 });

package/tests/client/css/global-pseudo.test.tsrx

@@ -20,7 +20,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+:has\(span\)/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+:has\(span\)/);
 		expect(css).toContain('div:has(span)');
 	});
 
@@ -44,7 +44,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ :is\(span, p:where\(\.ripple-[a-z0-9]+\)\) {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ :is\(span, p:where\(\.tsrx-[a-z0-9]+\)\) {/);
 		expect(css).not.toMatch(/span:where/);
 		expect(css).not.toMatch(/span\.ripple/);
 		expect(css).toContain('div:is(.foo, .bar)');
@@ -70,7 +70,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ :where\(span, p:where\(\.ripple-[a-z0-9]+\)\) {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ :where\(span, p:where\(\.tsrx-[a-z0-9]+\)\) {/);
 		expect(css).not.toMatch(/span:where/);
 		expect(css).not.toMatch(/span\.ripple/);
 		expect(css).toContain('div:where(.foo, .bar)');
@@ -95,7 +95,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+:not\(span\)/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+:not\(span\)/);
 		expect(css).toContain('div:not(.foo)');
 	});
 
@@ -118,7 +118,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+:is\(:where\(\.ripple-[a-z0-9]+\):has\(span\)\) {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+:is\(:where\(\.tsrx-[a-z0-9]+\):has\(span\)\) {/);
 		expect(css).toContain('div:where(:is(.foo))');
 	});
 
@@ -148,8 +148,8 @@ export component Test() {
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('span:nth-child(2) {');
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ > span:first-child {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ > span:first-child {/);
 		expect(css).toContain('div:last-child {');
-		expect(css).not.toMatch(/span\.ripple-[a-z0-9]+:nth-child/);
+		expect(css).not.toMatch(/span\.tsrx-[a-z0-9]+:nth-child/);
 	});
 });

package/tests/client/css/global-scoping.test.tsrx

@@ -14,7 +14,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/\.scoped\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/\.scoped\.tsrx-[a-z0-9]+/);
 		expect(css).not.toContain('.scoped {');
 	});
 
@@ -32,7 +32,7 @@ export component Test() {
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.global {');
-		expect(css).not.toMatch(/\.global\.ripple-[a-z0-9]+/);
+		expect(css).not.toMatch(/\.global\.tsrx-[a-z0-9]+/);
 	});
 
 	it('verifies mixed local and global maintain proper scoping', () => {
@@ -66,11 +66,11 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/\.outer\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/\.outer\.tsrx-[a-z0-9]+ {/);
 		expect(css).toMatch(/\.outer {/);
-		expect(css).toMatch(/\.outer\.ripple-[a-z0-9]+ \.inner:where\(\.ripple-[a-z0-9]+\) {/);
-		expect(css).toMatch(/\.outer \.inner\.ripple-[a-z0-9]+/);
-		expect(css).toMatch(/\.outer\.ripple-[a-z0-9]+ \.inner {/);
+		expect(css).toMatch(/\.outer\.tsrx-[a-z0-9]+ \.inner:where\(\.tsrx-[a-z0-9]+\) {/);
+		expect(css).toMatch(/\.outer \.inner\.tsrx-[a-z0-9]+/);
+		expect(css).toMatch(/\.outer\.tsrx-[a-z0-9]+ \.inner {/);
 	});
 
 	it('verifies :global blocks scope all nested selectors globally', () => {
@@ -103,9 +103,9 @@ export component Test() {
 		expect(css).toContain('div {');
 		expect(css).toContain('span {');
 		expect(css).toContain('button {');
-		expect(css).not.toMatch(/div\.ripple-[a-z0-9]+/);
-		expect(css).not.toMatch(/span\.ripple-[a-z0-9]+/);
-		expect(css).not.toMatch(/button\.ripple-[a-z0-9]+/);
+		expect(css).not.toMatch(/div\.tsrx-[a-z0-9]+/);
+		expect(css).not.toMatch(/span\.tsrx-[a-z0-9]+/);
+		expect(css).not.toMatch(/button\.tsrx-[a-z0-9]+/);
 	});
 
 	it('verifies element selectors are scoped by default', () => {
@@ -133,9 +133,9 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+/);
-		expect(css).toMatch(/span\.ripple-[a-z0-9]+/);
-		expect(css).toMatch(/button\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+/);
+		expect(css).toMatch(/span\.tsrx-[a-z0-9]+/);
+		expect(css).toMatch(/button\.tsrx-[a-z0-9]+/);
 	});
 
 	it('verifies :global() escapes only the wrapped selector', () => {
@@ -155,8 +155,8 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/\.local\.ripple-[a-z0-9]+ \.global \.local {/);
-		expect(css).not.toMatch(/\.global\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/\.local\.tsrx-[a-z0-9]+ \.global \.local {/);
+		expect(css).not.toMatch(/\.global\.tsrx-[a-z0-9]+/);
 	});
 
 	it('verifies multiple components have different scope hashes', () => {
@@ -183,11 +183,11 @@ export component Test2() {
 		const { css: css1 } = compile(source1, 'test1.tsrx');
 		const { css: css2 } = compile(source2, 'test2.tsrx');
 
-		expect(css1).toMatch(/\.test\.ripple-[a-z0-9]+/);
-		expect(css2).toMatch(/\.test\.ripple-[a-z0-9]+/);
+		expect(css1).toMatch(/\.test\.tsrx-[a-z0-9]+/);
+		expect(css2).toMatch(/\.test\.tsrx-[a-z0-9]+/);
 
-		const hash1Match = css1.match(/\.test\.ripple-([a-z0-9]+)/);
-		const hash2Match = css2.match(/\.test\.ripple-([a-z0-9]+)/);
+		const hash1Match = css1.match(/\.test\.tsrx-([a-z0-9]+)/);
+		const hash2Match = css2.match(/\.test\.tsrx-([a-z0-9]+)/);
 
 		expect(hash1Match).toBeTruthy();
 		expect(hash2Match).toBeTruthy();
@@ -222,8 +222,8 @@ export component Test2() {
 		const { css: css2 } = compile(source2, 'test2.tsrx');
 
 		expect(css1).toContain('.global {');
-		expect(css1).not.toMatch(/\.global\.ripple-[a-z0-9]+/);
+		expect(css1).not.toMatch(/\.global\.tsrx-[a-z0-9]+/);
 		expect(css2).toContain('.global {');
-		expect(css2).not.toMatch(/\.global\.ripple-[a-z0-9]+/);
+		expect(css2).not.toMatch(/\.global\.tsrx-[a-z0-9]+/);
 	});
 });

package/tests/client/css/style-identifier.test.tsrx

@@ -24,7 +24,7 @@ describe('#style identifier', () => {
 			expect(div).toBeTruthy();
 			expect(div.textContent).toBe('styled child');
 			const classes = Array.from(div.classList);
-			expect(classes.some((cls: string) => cls.startsWith('ripple-'))).toBe(true);
+			expect(classes.some((cls: string) => cls.startsWith('tsrx-'))).toBe(true);
 			expect(classes.some((cls: string) => cls === 'highlight')).toBe(true);
 		});
 
@@ -56,11 +56,11 @@ describe('#style identifier', () => {
 			expect(span).toBeTruthy();
 
 			const divClasses = Array.from(div.classList);
-			expect(divClasses.some((cls: string) => cls.startsWith('ripple-'))).toBe(true);
+			expect(divClasses.some((cls: string) => cls.startsWith('tsrx-'))).toBe(true);
 			expect(divClasses.some((cls: string) => cls === 'primary')).toBe(true);
 
 			const spanClasses = Array.from(span.classList);
-			expect(spanClasses.some((cls: string) => cls.startsWith('ripple-'))).toBe(true);
+			expect(spanClasses.some((cls: string) => cls.startsWith('tsrx-'))).toBe(true);
 			expect(spanClasses.some((cls: string) => cls === 'secondary')).toBe(true);
 		});
 
@@ -87,7 +87,7 @@ describe('#style identifier', () => {
 			const span = container.querySelector('span');
 			expect(span).toBeTruthy();
 			const classes = Array.from(span.classList);
-			expect(classes.some((cls: string) => cls.startsWith('ripple-'))).toBe(true);
+			expect(classes.some((cls: string) => cls.startsWith('tsrx-'))).toBe(true);
 			expect(classes.some((cls: string) => cls === 'text')).toBe(true);
 		});
 
@@ -146,7 +146,7 @@ describe('#style identifier', () => {
 			const span = container.querySelector('span');
 			expect(span).toBeTruthy();
 			const classes = Array.from(span.classList);
-			expect(classes.some((cls: string) => cls.startsWith('ripple-'))).toBe(true);
+			expect(classes.some((cls: string) => cls.startsWith('tsrx-'))).toBe(true);
 			expect(classes.some((cls: string) => cls === 'dual')).toBe(true);
 		});
 	});
@@ -365,7 +365,7 @@ export component App() {
 			const { js } = compile(source, 'test.tsrx');
 
 			expect(js.code).toContain('highlight');
-			expect(js.code).toMatch(/ripple-[a-z0-9]+/);
+			expect(js.code).toMatch(/tsrx-[a-z0-9]+/);
 		});
 
 		it('generates #style object with standalone classes for server mode', () => {
@@ -385,7 +385,7 @@ export component App() {
 			const { js } = compile(source, 'test.tsrx', { mode: 'server' });
 
 			expect(js.code).toContain('highlight');
-			expect(js.code).toMatch(/ripple-[a-z0-9]+/);
+			expect(js.code).toMatch(/tsrx-[a-z0-9]+/);
 		});
 	});
 });

package/tests/client/dynamic-elements.test.tsrx

@@ -330,7 +330,7 @@ describe('dynamic DOM elements', () => {
 
 		// Check if scoped CSS class is present - THIS MIGHT FAIL if CSS pruning issue exists
 		const classes = Array.from(element.classList);
-		const hasScopedClass = classes.some((cls) => cls.startsWith('ripple-'));
+		const hasScopedClass = classes.some((cls) => cls.startsWith('tsrx-'));
 		expect(hasScopedClass).toBe(true);
 	});
 
@@ -375,7 +375,7 @@ describe('dynamic DOM elements', () => {
 
 		// Check if scoped CSS hash is applied to dynamic element
 		const classes = Array.from(button.classList);
-		const hasScopedClass = classes.some((cls) => cls.startsWith('ripple-'));
+		const hasScopedClass = classes.some((cls) => cls.startsWith('tsrx-'));
 		expect(hasScopedClass).toBe(true);
 
 		// Click to increment
@@ -390,7 +390,7 @@ describe('dynamic DOM elements', () => {
 
 		// Scoped CSS class should still be present
 		const newClasses = Array.from(button.classList);
-		const stillHasScopedClass = newClasses.some((cls) => cls.startsWith('ripple-'));
+		const stillHasScopedClass = newClasses.some((cls) => cls.startsWith('tsrx-'));
 		expect(stillHasScopedClass).toBe(true);
 
 		// Click again
@@ -446,7 +446,7 @@ describe('dynamic DOM elements', () => {
 
 		// Check if scoped CSS hash is applied (this is the critical test)
 		const classes = Array.from(button.classList);
-		const hasScopedClass = classes.some((cls) => cls.startsWith('ripple-'));
+		const hasScopedClass = classes.some((cls) => cls.startsWith('tsrx-'));
 		expect(hasScopedClass).toBe(true);
 
 		// Click to increment
@@ -460,7 +460,7 @@ describe('dynamic DOM elements', () => {
 
 		// Both classes should still be present
 		const newClasses = Array.from(button.classList);
-		const stillHasScopedClass = newClasses.some((cls) => cls.startsWith('ripple-'));
+		const stillHasScopedClass = newClasses.some((cls) => cls.startsWith('tsrx-'));
 		expect(stillHasScopedClass).toBe(true);
 		expect(newClasses.includes('even')).toBe(true);
 	});
@@ -484,8 +484,8 @@ describe('dynamic DOM elements', () => {
 		const div = container.querySelector('div');
 		const p = div.querySelector('p');
 
-		expect(Array.from(div.classList).some((c) => c.startsWith('ripple-'))).toBe(true);
-		expect(Array.from(p.classList).some((c) => c.startsWith('ripple-'))).toBe(true);
+		expect(Array.from(div.classList).some((c) => c.startsWith('tsrx-'))).toBe(true);
+		expect(Array.from(p.classList).some((c) => c.startsWith('tsrx-'))).toBe(true);
 	});
 
 	it('adds scoping class to dynamic elements when selector targets by tag name', () => {
@@ -507,8 +507,8 @@ describe('dynamic DOM elements', () => {
 		const div = container.querySelector('div');
 		const p = div.querySelector('p');
 
-		expect(Array.from(div.classList).some((c) => c.startsWith('ripple-'))).toBe(true);
-		expect(Array.from(p.classList).some((c) => c.startsWith('ripple-'))).toBe(true);
+		expect(Array.from(div.classList).some((c) => c.startsWith('tsrx-'))).toBe(true);
+		expect(Array.from(p.classList).some((c) => c.startsWith('tsrx-'))).toBe(true);
 	});
 
 	it('doesn\'t add scoping class to components inside dynamic element', () => {
@@ -544,9 +544,9 @@ describe('dynamic DOM elements', () => {
 		const innerDiv = outerDiv.querySelector('.child');
 		const innerP = innerDiv.querySelector('p');
 
-		const outerScope = Array.from(outerDiv.classList).find((c) => c.startsWith('ripple-'));
-		const innerScopes = Array.from(innerDiv.classList).filter((c) => c.startsWith('ripple-'));
-		const innerInnerScopes = Array.from(innerP.classList).filter((c) => c.startsWith('ripple-'));
+		const outerScope = Array.from(outerDiv.classList).find((c) => c.startsWith('tsrx-'));
+		const innerScopes = Array.from(innerDiv.classList).filter((c) => c.startsWith('tsrx-'));
+		const innerInnerScopes = Array.from(innerP.classList).filter((c) => c.startsWith('tsrx-'));
 
 		expect(outerScope).toBeTruthy();
 
@@ -585,8 +585,8 @@ describe('dynamic DOM elements', () => {
 		const div = container.querySelector('.child');
 		const p = div.querySelector('p');
 
-		const outerScopes = Array.from(div.classList).filter((c) => c.startsWith('ripple-'));
-		const innerScopes = Array.from(p.classList).filter((c) => c.startsWith('ripple-'));
+		const outerScopes = Array.from(div.classList).filter((c) => c.startsWith('tsrx-'));
+		const innerScopes = Array.from(p.classList).filter((c) => c.startsWith('tsrx-'));
 
 		expect(outerScopes).toHaveLength(1);
 		expect(innerScopes).toHaveLength(0);

package/tests/server/basic.attributes.test.tsrx

@@ -35,9 +35,7 @@ describe('basic server > attribute rendering', () => {
 
 		const div = document.querySelector('div');
 
-		expect(Array.from(div.classList).some((className) => className.startsWith('ripple-'))).toBe(
-			true,
-		);
+		expect(Array.from(div.classList).some((className) => className.startsWith('tsrx-'))).toBe(true);
 		expect(div.classList.contains('inactive')).toBe(true);
 	});
 
@@ -72,9 +70,7 @@ describe('basic server > attribute rendering', () => {
 
 		const div = document.querySelector('div');
 
-		expect(Array.from(div.classList).some((className) => className.startsWith('ripple-'))).toBe(
-			true,
-		);
+		expect(Array.from(div.classList).some((className) => className.startsWith('tsrx-'))).toBe(true);
 
 		expect(div.classList.contains('foo')).toBe(true);
 		expect(div.classList.contains('bar')).toBe(true);
@@ -105,9 +101,7 @@ describe('basic server > attribute rendering', () => {
 
 		const div = document.querySelector('div');
 
-		expect(Array.from(div.classList).some((className) => className.startsWith('ripple-'))).toBe(
-			true,
-		);
+		expect(Array.from(div.classList).some((className) => className.startsWith('tsrx-'))).toBe(true);
 		expect(div.classList.contains('inactive')).toBe(true);
 		expect(div.classList.contains('active')).toBe(false);
 	});
@@ -138,7 +132,7 @@ describe('basic server > attribute rendering', () => {
 			const divs = document.querySelectorAll('div');
 
 			divs.forEach((div) => {
-				expect(Array.from(div.classList).some((className) => className.startsWith('ripple-'))).toBe(
+				expect(Array.from(div.classList).some((className) => className.startsWith('tsrx-'))).toBe(
 					true,
 				);
 			});

package/tests/server/dynamic-elements.test.tsrx

@@ -253,7 +253,7 @@ describe('server dynamic DOM elements', () => {
 		expect(element.classList.contains('test-class')).toBe(true);
 
 		const classes = Array.from(element.classList);
-		const hasScopedClass = classes.some((cls) => cls.startsWith('ripple-'));
+		const hasScopedClass = classes.some((cls) => cls.startsWith('tsrx-'));
 		expect(hasScopedClass).toBe(true);
 	});
 
@@ -292,7 +292,7 @@ describe('server dynamic DOM elements', () => {
 
 		// Check if scoped CSS hash is applied (this is the critical test)
 		const classes = Array.from(button.classList);
-		const hasScopedClass = classes.some((cls) => cls.startsWith('ripple-'));
+		const hasScopedClass = classes.some((cls) => cls.startsWith('tsrx-'));
 		expect(hasScopedClass).toBe(true);
 	});
 
@@ -317,8 +317,8 @@ describe('server dynamic DOM elements', () => {
 		const div = document.querySelector('div');
 		const p = div.querySelector('p');
 
-		expect(Array.from(div.classList).some((c) => c.startsWith('ripple-'))).toBe(true);
-		expect(Array.from(p.classList).some((c) => c.startsWith('ripple-'))).toBe(true);
+		expect(Array.from(div.classList).some((c) => c.startsWith('tsrx-'))).toBe(true);
+		expect(Array.from(p.classList).some((c) => c.startsWith('tsrx-'))).toBe(true);
 	});
 
 	it(
@@ -346,8 +346,8 @@ describe('server dynamic DOM elements', () => {
 			const div = document.querySelector('div');
 			const p = div.querySelector('p');
 
-			expect(Array.from(div.classList).some((c) => c.startsWith('ripple-'))).toBe(true);
-			expect(Array.from(p.classList).some((c) => c.startsWith('ripple-'))).toBe(true);
+			expect(Array.from(div.classList).some((c) => c.startsWith('tsrx-'))).toBe(true);
+			expect(Array.from(p.classList).some((c) => c.startsWith('tsrx-'))).toBe(true);
 		},
 	);
 
@@ -386,9 +386,9 @@ describe('server dynamic DOM elements', () => {
 		const innerDiv = outerDiv.querySelector('.child');
 		const innerP = innerDiv.querySelector('p');
 
-		const outerScope = Array.from(outerDiv.classList).find((c) => c.startsWith('ripple-'));
-		const innerScopes = Array.from(innerDiv.classList).filter((c) => c.startsWith('ripple-'));
-		const innerInnerScopes = Array.from(innerP.classList).filter((c) => c.startsWith('ripple-'));
+		const outerScope = Array.from(outerDiv.classList).find((c) => c.startsWith('tsrx-'));
+		const innerScopes = Array.from(innerDiv.classList).filter((c) => c.startsWith('tsrx-'));
+		const innerInnerScopes = Array.from(innerP.classList).filter((c) => c.startsWith('tsrx-'));
 
 		expect(outerScope).toBeTruthy();
 
@@ -429,8 +429,8 @@ describe('server dynamic DOM elements', () => {
 		const div = document.querySelector('.child');
 		const p = div.querySelector('p');
 
-		const outerScopes = Array.from(div.classList).filter((c) => c.startsWith('ripple-'));
-		const innerScopes = Array.from(p.classList).filter((c) => c.startsWith('ripple-'));
+		const outerScopes = Array.from(div.classList).filter((c) => c.startsWith('tsrx-'));
+		const innerScopes = Array.from(p.classList).filter((c) => c.startsWith('tsrx-'));
 
 		expect(outerScopes).toHaveLength(1);
 		expect(innerScopes).toHaveLength(0);