@codesuma/baseline 1.0.12 → 1.0.14

package/README.md

@@ -586,11 +586,17 @@ card.style({ ...Y(-10) })             // transform: translateY(-10px);
 
 ### Ripple Effect
 
+Enable the ripple effect globally in your main entry file:
+
 ```typescript
-import { withRipple, Button } from '@codesuma/baseline'
+import { initRipple, Button } from '@codesuma/baseline'
+
+// Initialize once
+initRipple()
 
-const btn = withRipple(Button('Click me'))
-// Now has Material Design ripple effect on click/touch
+// Usage
+const btn = Button('Click me')
+btn.attr('data-ripple', '') // Add ripple attribute
 ```
 
 ### Device Detection

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesuma/baseline",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "A minimal, imperative UI framework for building fast web apps. No virtual DOM, no magic, no dependencies.",
   "main": "index.ts",
   "types": "index.ts",

package/utils/ripple.ts

@@ -2,9 +2,11 @@ import { injectCSS } from '../utils/styler'
 
 const RIPPLE_CSS = `
 [data-ripple] {
-    position: relative;
     overflow: hidden;
 }
+:where([data-ripple]) {
+    position: relative;
+}
 [data-ripple] .ripple {
     position: absolute;
     border-radius: 50%;