ripple 0.3.20 → 0.3.21

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # ripple
 
+## 0.3.21
+
+### Patch Changes
+
+- Updated dependencies []:
+  - ripple@0.3.21
+
 ## 0.3.20
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.20",
+  "version": "0.3.21",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -83,6 +83,6 @@
     "@tsrx/ripple": "0.0.5"
   },
   "peerDependencies": {
-    "ripple": "0.3.20"
+    "ripple": "0.3.21"
   }
 }

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

@@ -37,9 +37,7 @@ describe('basic client > attribute rendering', () => {
 		const button = container.querySelector('button');
 		const div = container.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);
 
 		button.click();
@@ -82,9 +80,7 @@ describe('basic client > attribute rendering', () => {
 
 		const div = container.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);
 		expect(div.classList.contains('baz')).toBe(true);
@@ -121,9 +117,7 @@ describe('basic client > attribute rendering', () => {
 		const button = container.querySelector('button');
 		const div = container.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);
 
@@ -162,7 +156,7 @@ describe('basic client > attribute rendering', () => {
 		const divs = container.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/client/composite/composite.render.test.tsrx

@@ -137,10 +137,8 @@ describe('composite > render', () => {
 
 		const wrapper = container.querySelector('.green');
 		const child = container.querySelector('.red');
-		const wrapper_scopes = Array.from(wrapper.classList).filter(
-			(name) => name.startsWith('ripple-'),
-		);
-		const child_scopes = Array.from(child.classList).filter((name) => name.startsWith('ripple-'));
+		const wrapper_scopes = Array.from(wrapper.classList).filter((name) => name.startsWith('tsrx-'));
+		const child_scopes = Array.from(child.classList).filter((name) => name.startsWith('tsrx-'));
 
 		expect(wrapper_scopes).toHaveLength(1);
 		expect(child_scopes).toHaveLength(1);
@@ -230,8 +228,8 @@ describe('scoped styles with children', () => {
 		const wrapper = container.querySelector('.green');
 		const child = container.querySelector('.red');
 
-		const wrapper_classes = Array.from(wrapper.classList).filter((c) => c.startsWith('ripple-'));
-		const child_classes = Array.from(child.classList).filter((c) => c.startsWith('ripple-'));
+		const wrapper_classes = Array.from(wrapper.classList).filter((c) => c.startsWith('tsrx-'));
+		const child_classes = Array.from(child.classList).filter((c) => c.startsWith('tsrx-'));
 
 		expect(wrapper_classes).toHaveLength(1);
 		expect(child_classes).toHaveLength(1);

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

@@ -15,7 +15,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+\.x {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+\.x {/);
 	});
 
 	it('handles :global modifier in nested syntax', () => {
@@ -67,7 +67,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+:is\(html\.dark-mode \*\) {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+:is\(html\.dark-mode \*\) {/);
 	});
 
 	it('handles :global with & inside :global block', () => {
@@ -85,7 +85,7 @@ 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('&.class {');
 	});
 
@@ -105,7 +105,7 @@ export component Test() {
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('* {');
-		expect(css).toMatch(/&:hover \.class\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/&:hover \.class\.tsrx-[a-z0-9]+ {/);
 	});
 
 	it('handles multiple :global selectors in list', () => {
@@ -142,7 +142,7 @@ 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('z {');
 	});
 
@@ -180,8 +180,8 @@ export component Test() {
 		expect(css).toContain('@keyframes test-in {');
 		expect(css).toContain('.x {');
 		expect(css).toContain('.y {');
-		expect(css).toMatch(/@keyframes ripple-[a-z0-9]+-test/);
-		expect(css).not.toMatch(/\.x\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/@keyframes tsrx-[a-z0-9]+-test/);
+		expect(css).not.toMatch(/\.x\.tsrx-[a-z0-9]+/);
 	});
 
 	it('handles global keyframes with no component elements', () => {
@@ -222,9 +222,9 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+\.blue {/);
-		expect(css).toMatch(/span\.blue\.x\.ripple-[a-z0-9]+ {/);
-		expect(css).toMatch(/span\.x\.ripple-[a-z0-9]+\.bg {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+\.blue {/);
+		expect(css).toMatch(/span\.blue\.x\.tsrx-[a-z0-9]+ {/);
+		expect(css).toMatch(/span\.x\.tsrx-[a-z0-9]+\.bg {/);
 	});
 
 	it('handles multiple :global() in descendant sequence', () => {
@@ -241,7 +241,7 @@ export component Test() {
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div > section > p');
-		expect(css).toMatch(/p\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/p\.tsrx-[a-z0-9]+ {/);
 	});
 
 	it('handles :is with :global and html context', () => {
@@ -261,7 +261,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/x\.ripple-[a-z0-9]+ :is\(html \*\) {/);
+		expect(css).toMatch(/x\.tsrx-[a-z0-9]+ :is\(html \*\) {/);
 	});
 
 	it('handles :global block with :has inside', () => {
@@ -289,9 +289,9 @@ export component Test() {
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.foo {');
-		expect(css).toMatch(/\.ripple-[a-z0-9]+:has\(x:where\(\.ripple-[a-z0-9]+\)\) {/);
-		expect(css).toMatch(/&:has\(x\.ripple-[a-z0-9]+\) {/);
-		expect(css).toMatch(/.foo:has\(x\.ripple-[a-z0-9]+\) {/);
+		expect(css).toMatch(/\.tsrx-[a-z0-9]+:has\(x:where\(\.tsrx-[a-z0-9]+\)\) {/);
+		expect(css).toMatch(/&:has\(x\.tsrx-[a-z0-9]+\) {/);
+		expect(css).toMatch(/.foo:has\(x\.tsrx-[a-z0-9]+\) {/);
 	});
 
 	it('handles :not with :global in complex nesting', () => {
@@ -378,7 +378,7 @@ export component Test({ children }) {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/\.before\.ripple-[a-z0-9]+ \+ \.foo:where\(\.ripple-[a-z0-9]+\) {/);
+		expect(css).toMatch(/\.before\.tsrx-[a-z0-9]+ \+ \.foo:where\(\.tsrx-[a-z0-9]+\) {/);
 		expect((css.match(/\.x\ /g) || []).length).toBe(0);
 		expect((css.match(/\(unused\) :global\(\.x\) /g) || []).length).toBe(6);
 		expect(css).toContain('(unused) :global(.x) + .bar {');
@@ -419,7 +419,7 @@ component Child1() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/\.before\.ripple-[a-z0-9]+ \+ \.foo:where\(\.ripple-[a-z0-9]+\) {/);
+		expect(css).toMatch(/\.before\.tsrx-[a-z0-9]+ \+ \.foo:where\(\.tsrx-[a-z0-9]+\) {/);
 		expect((css.match(/\.x\ /g) || []).length).toBe(5);
 		expect((css.match(/\(unused\) :global\(\.x\) /g) || []).length).toBe(1);
 		expect(css).toContain('(unused) :global(.x) + .bar {');
@@ -465,7 +465,7 @@ component Child1() {
 }`;
 			const { css } = compile(source, 'test.tsrx');
 
-			expect(css).toMatch(/\.before\.ripple-[a-z0-9]+ \+ \.foo:where\(\.ripple-[a-z0-9]+\) {/);
+			expect(css).toMatch(/\.before\.tsrx-[a-z0-9]+ \+ \.foo:where\(\.tsrx-[a-z0-9]+\) {/);
 			expect((css.match(/\.x\ /g) || []).length).toBe(5);
 			expect((css.match(/\(unused\) :global\(\.x\) /g) || []).length).toBe(1);
 			expect(css).toContain('(unused) :global(.x) + .bar {');
@@ -509,7 +509,7 @@ export component Test({ children, classes }) {
 
 			const { css } = compile(source, 'test.tsrx');
 
-			expect(css).toMatch(/\.before\.ripple-[a-z0-9]+ \+ \.foo:where\(\.ripple-[a-z0-9]+\) {/);
+			expect(css).toMatch(/\.before\.tsrx-[a-z0-9]+ \+ \.foo:where\(\.tsrx-[a-z0-9]+\) {/);
 			expect((css.match(/\.x\ /g) || []).length).toBe(5);
 			expect((css.match(/\(unused\) :global\(\.x\) /g) || []).length).toBe(1);
 			expect(css).toContain('(unused) :global(.x) + .bar {');
@@ -533,7 +533,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/html body \.root\.ripple-[a-z0-9]+ p:where\(\.ripple-[a-z0-9]+\) {/);
+		expect(css).toMatch(/html body \.root\.tsrx-[a-z0-9]+ p:where\(\.tsrx-[a-z0-9]+\) {/);
 	});
 
 	it('handles nested @media with :global blocks', () => {
@@ -561,7 +561,7 @@ export component Test() {
 
 		expect(css).toContain('@media (min-width: 768px) {');
 		expect(css).toContain('.foo {');
-		expect(css).not.toMatch(/\.foo\.ripple-[a-z0-9]+/);
+		expect(css).not.toMatch(/\.foo\.tsrx-[a-z0-9]+/);
 	});
 
 	it('handles :has with complex combinators', () => {
@@ -591,7 +591,7 @@ export component Test() {
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(
-			/g\.ripple-[a-z0-9]+:has\(> h:where\(\.ripple-[a-z0-9]+\) > i:where\(\.ripple-[a-z0-9]+\)\)/,
+			/g\.tsrx-[a-z0-9]+:has\(> h:where\(\.tsrx-[a-z0-9]+\) > i:where\(\.tsrx-[a-z0-9]+\)\)/,
 		);
 		expect(css).toContain('(unused) h:has(> h > i)');
 	});
@@ -614,7 +614,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ h1\[data-title="Hello, world!"\]/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ h1\[data-title="Hello, world!"\]/);
 		expect(css).toContain('h1[attribute], video[autoplay]');
 	});
 
@@ -633,7 +633,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ \.h1\\,h2\\,h3 {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ \.h1\\,h2\\,h3 {/);
 	});
 
 	/**
@@ -658,8 +658,8 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ :is\(h1, h2\)/);
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ :where\(h1, h2\)/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ :is\(h1, h2\)/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ :where\(h1, h2\)/);
 	});
 
 	it('handles :global with :is containing compound selectors', () => {
@@ -679,7 +679,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ h1 ~ :is\(h2, h3\)/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ h1 ~ :is\(h2, h3\)/);
 	});
 
 	it('handles :global with pseudo-elements', () => {

package/tests/client/css/global-advanced-selectors.test.tsrx

@@ -20,7 +20,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ ::slotted\(span\) {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ ::slotted\(span\) {/);
 		expect(css).toContain('::slotted(*) {');
 	});
 
@@ -41,7 +41,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ ::part\(input\) {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ ::part\(input\) {/);
 		expect(css).toContain('::part(button) {');
 	});
 

package/tests/client/css/global-at-rules.test.tsrx

@@ -22,7 +22,7 @@ export component Test() {
 
 		expect(css).toContain('@media (min-width: 768px) {');
 		expect(css).toContain('div {');
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ span {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ span {/);
 	});
 
 	it('handles :global inside @supports queries', () => {
@@ -46,7 +46,7 @@ export component Test() {
 
 		expect(css).toContain('@supports (display: grid) {');
 		expect(css).toContain('.container {');
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ \.item {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ \.item {/);
 	});
 
 	it('handles nested @media with :global', () => {
@@ -74,8 +74,8 @@ export component Test() {
 
 		expect(css).toContain('@media (min-width: 768px) {');
 		expect(css).toContain('.foo {');
-		expect(css).not.toMatch(/\.foo\.ripple-[a-z0-9]+/);
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ {/);
+		expect(css).not.toMatch(/\.foo\.tsrx-[a-z0-9]+/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
 	});
 
 	it('handles :global in @container queries', () => {
@@ -121,6 +121,6 @@ export component Test() {
 		expect(css).toContain('@media screen {');
 		expect(css).toContain('@supports (display: flex) {');
 		expect(css).toContain('.flex-container {');
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ \.flex-item {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ \.flex-item {/);
 	});
 });

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

@@ -16,7 +16,7 @@ export component Test() {
 
 		expect(css).toContain('div {');
 		expect(css).toContain('color: red;');
-		expect(css).not.toMatch(/div\.ripple-[a-z0-9]+/);
+		expect(css).not.toMatch(/div\.tsrx-[a-z0-9]+/);
 	});
 
 	it('applies global selector with class', () => {
@@ -38,7 +38,7 @@ export component Test() {
 
 		expect(css).toContain('div.foo {');
 		expect(css).toContain('.foo {');
-		expect(css).not.toMatch(/\.foo\.ripple-[a-z0-9]+/);
+		expect(css).not.toMatch(/\.foo\.tsrx-[a-z0-9]+/);
 	});
 
 	it('mixes global and local selectors', () => {
@@ -62,7 +62,7 @@ export component Test() {
 
 		expect(css).toContain('div .foo');
 		expect(css).toContain('div > .foo');
-		expect(css).toMatch(/\.foo\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/\.foo\.tsrx-[a-z0-9]+/);
 	});
 
 	it('handles global block syntax', () => {
@@ -86,7 +86,7 @@ export component Test() {
 
 		expect(css).toContain('.x {');
 		expect(css).toContain('.a, .selector, .list {');
-		expect(css).not.toMatch(/\.x\.ripple-[a-z0-9]+/);
+		expect(css).not.toMatch(/\.x\.tsrx-[a-z0-9]+/);
 	});
 
 	it('handles global with pseudo-classes', () => {
@@ -108,7 +108,7 @@ export component Test() {
 
 		expect(css).toContain('button:hover {');
 		expect(css).toContain('button:focus {');
-		expect(css).not.toMatch(/button\.ripple-[a-z0-9]+/);
+		expect(css).not.toMatch(/button\.tsrx-[a-z0-9]+/);
 	});
 
 	it('handles multiple global selectors in selector list', () => {
@@ -157,9 +157,9 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/\.styled-container\.ripple-[a-z0-9]+/);
-		expect(css).toMatch(/\.text\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/\.styled-container\.tsrx-[a-z0-9]+/);
+		expect(css).toMatch(/\.text\.tsrx-[a-z0-9]+/);
 		expect(css).toContain('h1 {');
-		expect(css).not.toMatch(/h1\.ripple-[a-z0-9]+/);
+		expect(css).not.toMatch(/h1\.tsrx-[a-z0-9]+/);
 	});
 });

package/tests/client/css/global-classes-ids.test.tsrx

@@ -15,7 +15,7 @@ export component Test() {
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.foo {');
-		expect(css).not.toMatch(/\.foo\.ripple-[a-z0-9]+/);
+		expect(css).not.toMatch(/\.foo\.tsrx-[a-z0-9]+/);
 	});
 
 	it('handles :global with chained classes', () => {
@@ -40,8 +40,8 @@ export component Test() {
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.foo.bar {');
-		expect(css).toMatch(/\.foo\.bar\.ripple-[a-z0-9]+ {/);
-		expect(css).toMatch(/\.foo\.ripple-[a-z0-9]+\.bar {/);
+		expect(css).toMatch(/\.foo\.bar\.tsrx-[a-z0-9]+ {/);
+		expect(css).toMatch(/\.foo\.tsrx-[a-z0-9]+\.bar {/);
 	});
 
 	it('handles local class inside :global selector', () => {
@@ -63,7 +63,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/\.outer \.inner\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/\.outer \.inner\.tsrx-[a-z0-9]+ {/);
 		expect(css).toMatch(/\(unused\) :global\(div\) \.foo {/);
 	});
 
@@ -92,8 +92,8 @@ export component Test() {
 
 		expect(css).toContain('#app {');
 		expect(css).not.toContain('#app #content {');
-		expect(css).not.toMatch(/#app\.ripple-[a-z0-9]+/);
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ #content {/);
+		expect(css).not.toMatch(/#app\.tsrx-[a-z0-9]+/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ #content {/);
 	});
 
 	it('handles :global with class and ID combination', () => {
@@ -118,8 +118,8 @@ export component Test() {
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('#app.container {');
-		expect(css).toMatch(/\.container#app\.ripple-[a-z0-9]+ {/);
-		expect(css).toMatch(/#app\.ripple-[a-z0-9]+\.container {/);
+		expect(css).toMatch(/\.container#app\.tsrx-[a-z0-9]+ {/);
+		expect(css).toMatch(/#app\.tsrx-[a-z0-9]+\.container {/);
 	});
 
 	it('handles multiple classes with :global', () => {
@@ -143,8 +143,8 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect((css.match(/\.a\.b\.c\.ripple-[a-z0-9]+ {/g) || []).length).toBe(2);
-		expect(css).toMatch(/\.a\.b\.ripple-[a-z0-9]+\.c {/);
+		expect((css.match(/\.a\.b\.c\.tsrx-[a-z0-9]+ {/g) || []).length).toBe(2);
+		expect(css).toMatch(/\.a\.b\.tsrx-[a-z0-9]+\.c {/);
 	});
 
 	it('handles :global with class descendant selectors', () => {
@@ -172,8 +172,8 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/\.outer \.middle\.ripple-[a-z0-9]+ \.inner:where\(\.ripple-[a-z0-9]+\)/);
-		expect(css).toMatch(/\.outer\.ripple-[a-z0-9]+ \.middle \.inner {/);
-		expect(css).toMatch(/\.outer\.ripple-[a-z0-9]+ \.middle:where\(\.ripple-[a-z0-9]+\)\.inner/);
+		expect(css).toMatch(/\.outer \.middle\.tsrx-[a-z0-9]+ \.inner:where\(\.tsrx-[a-z0-9]+\)/);
+		expect(css).toMatch(/\.outer\.tsrx-[a-z0-9]+ \.middle \.inner {/);
+		expect(css).toMatch(/\.outer\.tsrx-[a-z0-9]+ \.middle:where\(\.tsrx-[a-z0-9]+\)\.inner/);
 	});
 });

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

@@ -16,8 +16,8 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ > span {/);
-		expect(css).not.toMatch(/span\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ > span {/);
+		expect(css).not.toMatch(/span\.tsrx-[a-z0-9]+/);
 	});
 
 	it('handles :global with adjacent sibling combinator', () => {
@@ -40,7 +40,7 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/span\.ripple-[a-z0-9]+ \+ span {/);
+		expect(css).toMatch(/span\.tsrx-[a-z0-9]+ \+ span {/);
 		expect(css).toContain('(unused) :global(div) + span {');
 	});
 
@@ -66,7 +66,7 @@ export component Test() {
 
 		expect(css).toContain('~');
 
-		expect(css).toMatch(/span\.ripple-[a-z0-9]+ ~ span {/);
+		expect(css).toMatch(/span\.tsrx-[a-z0-9]+ ~ span {/);
 		expect(css).toMatch('(unused) :global(div) ~ span {');
 	});
 
@@ -92,8 +92,8 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ > span > button {/);
-		expect(css).toMatch(/div > span\.ripple-[a-z0-9]+ \+ button:where\(\.ripple-[a-z0-9]+\) {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ > span > button {/);
+		expect(css).toMatch(/div > span\.tsrx-[a-z0-9]+ \+ button:where\(\.tsrx-[a-z0-9]+\) {/);
 	});
 
 	it('handles :global with descendant combinator', () => {
@@ -118,7 +118,7 @@ export component Test() {
 
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ span button {/);
-		expect(css).toMatch(/div span\.ripple-[a-z0-9]+ button:where\(\.ripple-[a-z0-9]+\) {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ span button {/);
+		expect(css).toMatch(/div span\.tsrx-[a-z0-9]+ button:where\(\.tsrx-[a-z0-9]+\) {/);
 	});
 });

package/tests/client/css/global-complex-nesting.test.tsrx

@@ -26,9 +26,9 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		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('handles local block with :global nested inside', () => {
@@ -54,8 +54,8 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ {/);
-		expect(css).not.toMatch(/span\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
+		expect(css).not.toMatch(/span\.tsrx-[a-z0-9]+ {/);
 		expect(css).toContain('(unused) p {');
 	});
 
@@ -82,8 +82,8 @@ export component Test() {
 
 		expect(css).toContain('div {');
 		expect(css).toContain('.local {');
-		expect(css).not.toMatch(/div\.ripple-[a-z0-9]+ {/);
-		expect(css).not.toMatch(/\.local\.ripple-[a-z0-9]+ {/);
+		expect(css).not.toMatch(/div\.tsrx-[a-z0-9]+ {/);
+		expect(css).not.toMatch(/\.local\.tsrx-[a-z0-9]+ {/);
 	});
 
 	it('handles alternating :global and local nesting', () => {
@@ -111,8 +111,8 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ {/);
-		expect(css).toMatch(/button\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
+		expect(css).toMatch(/button\.tsrx-[a-z0-9]+ {/);
 		expect(css).toContain('span {');
 		expect(css).toContain('em {');
 	});
@@ -142,11 +142,11 @@ 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('span {');
 		expect(css).toContain('button {');
-		expect(css).not.toMatch(/span\.ripple-[a-z0-9]+/);
-		expect(css).not.toMatch(/button\.ripple-[a-z0-9]+/);
+		expect(css).not.toMatch(/span\.tsrx-[a-z0-9]+/);
+		expect(css).not.toMatch(/button\.tsrx-[a-z0-9]+/);
 	});
 
 	it('handles :global with nesting combinator &', () => {
@@ -174,8 +174,8 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/\.container\.ripple-[a-z0-9]+ {/);
-		expect(css).toMatch(/button\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/\.container\.tsrx-[a-z0-9]+ {/);
+		expect(css).toMatch(/button\.tsrx-[a-z0-9]+ {/);
 		expect(css).toContain('&.active {');
 		expect(css).toContain('&.pressed {');
 	});
@@ -209,13 +209,13 @@ export component Test() {
 }`;
 		const { css } = compile(source, 'test.tsrx');
 
-		expect(css).toMatch(/div\.ripple-[a-z0-9]+ {/);
-		expect(css).toMatch(/ul\.ripple-[a-z0-9]+ {/);
-		expect(css).toMatch(/a\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
+		expect(css).toMatch(/ul\.tsrx-[a-z0-9]+ {/);
+		expect(css).toMatch(/a\.tsrx-[a-z0-9]+ {/);
 
 		expect(css).toContain('nav {');
 		expect(css).toContain('li {');
-		expect(css).not.toMatch(/nav\.ripple-[a-z0-9]+ {/);
-		expect(css).not.toMatch(/li\.ripple-[a-z0-9]+ {/);
+		expect(css).not.toMatch(/nav\.tsrx-[a-z0-9]+ {/);
+		expect(css).not.toMatch(/li\.tsrx-[a-z0-9]+ {/);
 	});
 });

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);

package/tests/server/style-identifier.test.tsrx

@@ -25,7 +25,7 @@ describe('#style identifier (server)', () => {
 			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);
 		});
 
@@ -58,11 +58,11 @@ describe('#style identifier (server)', () => {
 			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);
 		});
 	});
@@ -89,7 +89,7 @@ describe('#style identifier (server)', () => {
 			const button = document.querySelector('button');
 			expect(button).toBeTruthy();
 			const classes = Array.from(button.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 === 'fancy')).toBe(true);
 		});
 
@@ -152,7 +152,7 @@ describe('#style identifier (server)', () => {
 				const span = document.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);
 			},
 		);
@@ -182,7 +182,7 @@ describe('#style identifier (server)', () => {
 		const span = document.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);
 	});
 
@@ -220,10 +220,8 @@ describe('#style identifier (server)', () => {
 		const { document } = parseHtml(body);
 		const wrapper = document.querySelector('.green');
 		const child = document.querySelector('.red');
-		const wrapper_scopes = Array.from(wrapper.classList).filter(
-			(name) => name.startsWith('ripple-'),
-		);
-		const child_scopes = Array.from(child.classList).filter((name) => name.startsWith('ripple-'));
+		const wrapper_scopes = Array.from(wrapper.classList).filter((name) => name.startsWith('tsrx-'));
+		const child_scopes = Array.from(child.classList).filter((name) => name.startsWith('tsrx-'));
 
 		expect(wrapper_scopes).toHaveLength(1);
 		expect(child_scopes).toHaveLength(1);
@@ -256,7 +254,7 @@ describe('#style identifier (server)', () => {
 		const { document } = parseHtml(body);
 		const slotted_child = document.querySelector('section > div.green');
 		const slotted_scopes = Array.from(slotted_child.classList).filter(
-			(name) => name.startsWith('ripple-'),
+			(name) => name.startsWith('tsrx-'),
 		);
 
 		expect(slotted_scopes).toHaveLength(1);
@@ -280,7 +278,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]+/);
 			expect(js.code).toContain('register_css');
 		});
 
@@ -303,9 +301,9 @@ export component App() {
 
 			expect(css.size).toBeGreaterThan(0);
 			const hashes = Array.from(css);
-			expect(hashes.some((h: string) => h.startsWith('ripple-'))).toBe(true);
+			expect(hashes.some((h: string) => h.startsWith('tsrx-'))).toBe(true);
 
-			expect(body).toMatch(/ripple-[a-z0-9]+/);
+			expect(body).toMatch(/tsrx-[a-z0-9]+/);
 			expect(body).toContain('styled');
 		});
 	});