Renaming some attributes

CHANGELOG.md

@@ -6,6 +6,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.0] - 2024-01-03
+
+### Chore
+
+- Renaming `card` target to `child`.
+- Renaming `overlay` class to `glow-overlay`.
+- Removing the `glow` attribute on the overlay.
+
 ## [0.2.0] - 2023-12-27
 
 ### Added

index.html

@@ -168,7 +168,7 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
       <section class="mt-16 space-y-12">
         <div data-controller="glow" class="relative glow-capture">
           <div
-            data-glow-target="card"
+            data-glow-target="child"
             class="
               glow glow:ring-1 glow:border-glow glow:ring-glow glow:bg-glow/[.15]
               border-4 border-gray-400
@@ -225,12 +225,12 @@ <h2 class="font-bold text-2xl mb-4 text-gray-200 glow:text-glow/[.8]">Chicken Sh
             </div>
           </div>
 
-          <div data-glow-target="overlay" glow class="overlay" style="--glow-color: #f97316"></div>
+          <div data-glow-target="overlay" class="glow-overlay" style="--glow-color: #f97316"></div>
         </div>
 
         <div data-controller="glow" class="relative glow-capture">
           <div
-            data-glow-target="card"
+            data-glow-target="child"
             class="
               glow glow:ring-1 glow:border-glow glow:ring-glow glow:bg-glow/[.15]
               border-4 border-gray-400
@@ -289,12 +289,12 @@ <h2 class="font-bold text-2xl mb-4 text-gray-200 glow:text-glow/[.8]">
             </div>
           </div>
 
-          <div data-glow-target="overlay" glow class="overlay" style="--glow-color: #10b981"></div>
+          <div data-glow-target="overlay" class="glow-overlay" style="--glow-color: #10b981"></div>
         </div>
 
         <div data-controller="glow" class="relative glow-capture">
           <div
-            data-glow-target="card"
+            data-glow-target="child"
             class="
               glow glow:ring-1 glow:border-glow glow:ring-glow glow:bg-glow/[.15]
               border-4 border-gray-400
@@ -351,7 +351,7 @@ <h2 class="font-bold text-2xl mb-4 text-gray-200 glow:text-glow/[.8]">Vermicelli
             </div>
           </div>
 
-          <div data-glow-target="overlay" glow class="overlay" style="--glow-color: #3b82f6"></div>
+          <div data-glow-target="overlay" class="glow-overlay" style="--glow-color: #3b82f6"></div>
         </div>
       </section>
     </div>

src/app.css

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-.overlay {
+.glow-overlay {
   --glow-size: 25rem;
 
   position: absolute;

src/index.ts

@@ -1,17 +1,17 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller<HTMLElement> {
-  declare cardTarget: HTMLElement
+  declare childTarget: HTMLElement
   declare overlayTarget: HTMLElement
 
-  static targets = ['card', 'overlay']
+  static targets = ['child', 'overlay']
 
   initialize (): void {
     this.move = this.move.bind(this)
   }
 
   connect (): void {
-    this.overlayTarget.append(this.cardTarget.cloneNode(true))
+    this.overlayTarget.append(this.childTarget.cloneNode(true))
 
     document.body.addEventListener('pointermove', this.move)
   }

tailwind.config.js

@@ -8,7 +8,7 @@ module.exports = {
 
   plugins: [
     plugin(({ addVariant }) => {
-      addVariant("glow", ".glow-capture [glow] &");
+      addVariant("glow", ".glow-capture .glow-overlay &");
     },
     {
       theme: {