ripple 0.3.19 → 0.3.21

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # ripple
 
+## 0.3.21
+
+### Patch Changes
+
+- Updated dependencies []:
+  - ripple@0.3.21
+
+## 0.3.20
+
+### Patch Changes
+
+- Updated dependencies []:
+  - ripple@0.3.20
+
 ## 0.3.19
 
 ### 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.19",
+  "version": "0.3.21",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -36,9 +36,6 @@
     "./compiler/internal/import": {
       "types": "./src/compiler/types/import.d.ts"
     },
-    "./compiler/internal/rpc": {
-      "types": "./src/compiler/types/rpc.d.ts"
-    },
     "./validator": {
       "types": "./types/index.d.ts",
       "require": "./validator/index.js",
@@ -86,6 +83,6 @@
     "@tsrx/ripple": "0.0.5"
   },
   "peerDependencies": {
-    "ripple": "0.3.19"
+    "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]+ {/);
 	});
 });