phoenix_duskmoon 4.5.0 → 4.5.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [4.5.1](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v4.5.0...v4.5.1) (2024-07-04)
+
+
+### Bug Fixes
+
+* Fix tailwindcss. ([f675f86](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/commit/f675f86df77a8b08e634e5238767d2e0cd0dad27))
+
 # [4.5.0](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/compare/v4.4.4...v4.5.0) (2024-07-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_duskmoon",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "main": "./priv/static/phoenix_duskmoon.js",
   "exports": {
     ".": "./priv/static/phoenix_duskmoon.js",
@@ -23,14 +23,17 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@gsmlg/lit": "1.29.5",
-    "lit": "^2.4.1",
-    "lit-element": "^3.2.2",
-    "lit-html": "^2.4.0"
+    "@gsmlg/lit": "1.30.3",
+    "lit": "^3.1.4",
+    "lit-element": "^4.0.6",
+    "lit-html": "^3.1.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
-    "@babel/preset-env": "^7.20.2"
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@tailwindcss/typography": "^0.5.13",
+    "daisyui": "^4.12.10",
+    "postcss": "^8.4.39"
   },
   "peerDependencies": {
     "@gsmlg/lit": "1.29.5",
@@ -38,4 +41,4 @@
     "lit-element": "^3.2.2",
     "lit-html": "^2.4.0"
   }
-}
+}

package/priv/static/phoenix_duskmoon.css

@@ -1,936 +0,0 @@
-/* @import "tailwindcss/base"; */
-
-/* @import "tailwindcss/components"; */
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.fixed {
-  position: fixed;
-}
-
-.absolute {
-  position: absolute;
-}
-
-.relative {
-  position: relative;
-}
-
-.sticky {
-  position: -webkit-sticky;
-  position: sticky;
-}
-
-.top-14 {
-  top: 3.5rem;
-}
-
-.right-2 {
-  right: 0.5rem;
-}
-
-.top-2 {
-  top: 0.5rem;
-}
-
-.top-12 {
-  top: 3rem;
-}
-
-.left-0 {
-  left: 0px;
-}
-
-.right-0 {
-  right: 0px;
-}
-
-.top-0 {
-  top: 0px;
-}
-
-.isolate {
-  isolation: isolate;
-}
-
-.z-50 {
-  z-index: 50;
-}
-
-.z-10 {
-  z-index: 10;
-}
-
-.m-4 {
-  margin: 1rem;
-}
-
-.mx-12 {
-  margin-left: 3rem;
-  margin-right: 3rem;
-}
-
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.mx-8 {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
-.mt-0\.5 {
-  margin-top: 0.125rem;
-}
-
-.mt-0 {
-  margin-top: 0px;
-}
-
-.mr-1 {
-  margin-right: 0.25rem;
-}
-
-.flex {
-  display: flex;
-}
-
-.inline-flex {
-  display: inline-flex;
-}
-
-.table {
-  display: table;
-}
-
-.grid {
-  display: grid;
-}
-
-.hidden {
-  display: none;
-}
-
-.h-16 {
-  height: 4rem;
-}
-
-.h-14 {
-  height: 3.5rem;
-}
-
-.h-full {
-  height: 100%;
-}
-
-.h-10 {
-  height: 2.5rem;
-}
-
-.h-8 {
-  height: 2rem;
-}
-
-.h-4 {
-  height: 1rem;
-}
-
-.h-5 {
-  height: 1.25rem;
-}
-
-.h-12 {
-  height: 3rem;
-}
-
-.min-h-\[200px\] {
-  min-height: 200px;
-}
-
-.min-h-fit {
-  min-height: -webkit-fit-content;
-  min-height: -moz-fit-content;
-  min-height: fit-content;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.w-10 {
-  width: 2.5rem;
-}
-
-.w-8 {
-  width: 2rem;
-}
-
-.w-4 {
-  width: 1rem;
-}
-
-.w-5 {
-  width: 1.25rem;
-}
-
-.w-16 {
-  width: 4rem;
-}
-
-.w-\[200px\] {
-  width: 200px;
-}
-
-.min-w-\[420px\] {
-  min-width: 420px;
-}
-
-.max-w-xs {
-  max-width: 20rem;
-}
-
-.flex-none {
-  flex: none;
-}
-
-.flex-1 {
-  flex: 1 1 0%;
-}
-
-.shrink-0 {
-  flex-shrink: 0;
-}
-
-.table-fixed {
-  table-layout: fixed;
-}
-
-.border-collapse {
-  border-collapse: collapse;
-}
-
-.border-spacing-0 {
-  --tw-border-spacing-x: 0px;
-  --tw-border-spacing-y: 0px;
-  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
-}
-
-.transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.select-none {
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.grid-cols-\[6em_auto\] {
-  grid-template-columns: 6em auto;
-}
-
-.flex-row {
-  flex-direction: row;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.items-start {
-  align-items: flex-start;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.justify-start {
-  justify-content: flex-start;
-}
-
-.justify-end {
-  justify-content: flex-end;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.gap-4 {
-  gap: 1rem;
-}
-
-.gap-2 {
-  gap: 0.5rem;
-}
-
-.gap-6 {
-  gap: 1.5rem;
-}
-
-.gap-3 {
-  gap: 0.75rem;
-}
-
-.gap-x-2 {
-  -moz-column-gap: 0.5rem;
-       column-gap: 0.5rem;
-}
-
-.gap-y-4 {
-  row-gap: 1rem;
-}
-
-.-space-x-px > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(-1px * var(--tw-space-x-reverse));
-  margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.self-center {
-  align-self: center;
-}
-
-.rounded {
-  border-radius: 0.25rem;
-}
-
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
-.rounded-md {
-  border-radius: 0.375rem;
-}
-
-.rounded-l-md {
-  border-top-left-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.rounded-r-md {
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-}
-
-.border {
-  border-width: 1px;
-}
-
-.border-x-0 {
-  border-left-width: 0px;
-  border-right-width: 0px;
-}
-
-.border-y-0 {
-  border-top-width: 0px;
-  border-bottom-width: 0px;
-}
-
-.border-t {
-  border-top-width: 1px;
-}
-
-.border-t-0 {
-  border-top-width: 0px;
-}
-
-.border-b {
-  border-bottom-width: 1px;
-}
-
-.border-l-0 {
-  border-left-width: 0px;
-}
-
-.border-r {
-  border-right-width: 1px;
-}
-
-.border-solid {
-  border-style: solid;
-}
-
-.border-zinc-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(212 212 216 / var(--tw-border-opacity));
-}
-
-.border-gray-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
-}
-
-.border-gray-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
-}
-
-.border-indigo-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(99 102 241 / var(--tw-border-opacity));
-}
-
-.border-blue-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(96 165 250 / var(--tw-border-opacity));
-}
-
-.bg-\[rgba\(255\2c 255\2c 255\2c \.7\)\] {
-  background-color: rgba(255,255,255,.7);
-}
-
-.bg-blue-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
-}
-
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.bg-indigo-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(238 242 255 / var(--tw-bg-opacity));
-}
-
-.bg-slate-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
-}
-
-.bg-slate-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
-}
-
-.p-6 {
-  padding: 1.5rem;
-}
-
-.p-4 {
-  padding: 1rem;
-}
-
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-
-.px-10 {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
-
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.py-20 {
-  padding-top: 5rem;
-  padding-bottom: 5rem;
-}
-
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-
-.px-12 {
-  padding-left: 3rem;
-  padding-right: 3rem;
-}
-
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.pt-4 {
-  padding-top: 1rem;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.indent-2\.5 {
-  text-indent: 0.625rem;
-}
-
-.indent-2 {
-  text-indent: 0.5rem;
-}
-
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.text-\[14px\] {
-  font-size: 14px;
-}
-
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
-.font-semibold {
-  font-weight: 600;
-}
-
-.font-bold {
-  font-weight: 700;
-}
-
-.font-medium {
-  font-weight: 500;
-}
-
-.leading-6 {
-  line-height: 1.5rem;
-}
-
-.text-zinc-600 {
-  --tw-text-opacity: 1;
-  color: rgb(82 82 91 / var(--tw-text-opacity));
-}
-
-.text-zinc-900 {
-  --tw-text-opacity: 1;
-  color: rgb(24 24 27 / var(--tw-text-opacity));
-}
-
-.text-\[\#A1A7C4\] {
-  --tw-text-opacity: 1;
-  color: rgb(161 167 196 / var(--tw-text-opacity));
-}
-
-.text-blue-500 {
-  --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
-}
-
-.text-gray-700 {
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
-.text-indigo-600 {
-  --tw-text-opacity: 1;
-  color: rgb(79 70 229 / var(--tw-text-opacity));
-}
-
-.text-blue-400 {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
-}
-
-.text-teal-600 {
-  --tw-text-opacity: 1;
-  color: rgb(13 148 136 / var(--tw-text-opacity));
-}
-
-.text-teal-400 {
-  --tw-text-opacity: 1;
-  color: rgb(45 212 191 / var(--tw-text-opacity));
-}
-
-.underline {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
-}
-
-.shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-sm {
-  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.blur {
-  --tw-blur: blur(8px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-/* modal */
-
-.modal {
-  position: relative;
-  box-shadow: var(--shadow-2), 0 0 0 100vw rgb(0 0 0 / 0.8);
-  background: #fff;
-  color: #222;
-  border: 0;
-  border-radius: 0.25rem;
-  --x: 0;
-  --y: 0;
-  --delay: 750ms;
-  --animation-timing-func: cubic-bezier(0.75, 0.7, 0, 1.02);
-}
-
-.modal > .close {
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-  cursor: pointer;
-}
-
-.modal::-webkit-backdrop {
-  opacity: 0;
-  isolation: isolate;
-  /* display: none; */
-  -webkit-transition: all 0s;
-  transition: all 0s;
-}
-
-.modal::backdrop {
-  opacity: 0;
-  isolation: isolate;
-  /* display: none; */
-  transition: all 0s;
-}
-
-.modal.backdrop::-webkit-backdrop {
-  opacity: 0;
-  display: initial;
-  -webkit-transition: all 0s;
-  transition: all 0s;
-}
-
-.modal.backdrop::backdrop {
-  opacity: 0;
-  display: initial;
-  transition: all 0s;
-}
-
-.modal[open] {
-  -webkit-animation: 
-        fade-in var(--delay) forwards var(--animation-timing-func),
-        fly-in var(--delay) forwards var(--animation-timing-func);
-          animation: 
-        fade-in var(--delay) forwards var(--animation-timing-func),
-        fly-in var(--delay) forwards var(--animation-timing-func);
-  pointer-events: auto;
-  visibility: visible;
-}
-
-.modal[closing] {
-  -webkit-animation: 
-        fade-out var(--delay) forwards var(--animation-timing-func),
-        fly-out var(--delay) forwards var(--animation-timing-func);
-          animation: 
-        fade-out var(--delay) forwards var(--animation-timing-func),
-        fly-out var(--delay) forwards var(--animation-timing-func);
-  display: block;
-  inset: 0;
-  pointer-events: none;
-}
-
-.modal[open]::-webkit-backdrop {
-  transform: none !important;
-  -webkit-animation: fade-in 500ms forwards;
-          animation: fade-in 500ms forwards;
-}
-
-.modal[open]::backdrop {
-  transform: none !important;
-  -webkit-animation: fade-in 500ms forwards;
-          animation: fade-in 500ms forwards;
-}
-
-.modal[closing]::-webkit-backdrop {
-  transform: none !important;
-  -webkit-animation: fade-out 500ms forwards;
-          animation: fade-out 500ms forwards;
-}
-
-.modal[closing]::backdrop {
-  transform: none !important;
-  -webkit-animation: fade-out 500ms forwards;
-          animation: fade-out 500ms forwards;
-}
-
-@-webkit-keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes fade-out {
-  100% {
-    opacity: 0;
-  }
-
-  0% {
-    opacity: 1;
-  }
-}
-
-@keyframes fade-out {
-  100% {
-    opacity: 0;
-  }
-
-  0% {
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes fly-in {
-  0% {
-    transform: translate3d(var(--x), var(--y), -200px) scale(0.01)
-        perspective(6em);
-  }
-
-  100% {
-    transform: translate3d(0%, 0%, 0px) scale(1) perspective(1em);
-  }
-}
-
-@keyframes fly-in {
-  0% {
-    transform: translate3d(var(--x), var(--y), -200px) scale(0.01)
-        perspective(6em);
-  }
-
-  100% {
-    transform: translate3d(0%, 0%, 0px) scale(1) perspective(1em);
-  }
-}
-
-@-webkit-keyframes fly-out {
-  0% {
-    transform: translate3d(0%, 0%, 0px) scale(1) perspective(1em);
-  }
-
-  100% {
-    transform: translate3d(var(--x), var(--y), -200px) scale(0.01)
-        perspective(6em);
-  }
-}
-
-@keyframes fly-out {
-  0% {
-    transform: translate3d(0%, 0%, 0px) scale(1) perspective(1em);
-  }
-
-  100% {
-    transform: translate3d(var(--x), var(--y), -200px) scale(0.01)
-        perspective(6em);
-  }
-}
-
-.before\:font-bold::before {
-  content: var(--tw-content);
-  font-weight: 700;
-}
-
-.before\:content-\[attr\(data-label\)\]::before {
-  --tw-content: attr(data-label);
-  content: var(--tw-content);
-}
-
-.after\:content-\[\'\:\'\]::after {
-  --tw-content: ':';
-  content: var(--tw-content);
-}
-
-.even\:bg-white:nth-child(even) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
-
-.hover\:opacity-50:hover {
-  opacity: 0.5;
-}
-
-.focus\:z-20:focus {
-  z-index: 20;
-}
-
-.focus\:ring-0:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.peer:checked ~ .peer-checked\:flex {
-  display: flex;
-}
-
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-blue-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 58 138 / var(--tw-bg-opacity));
-  }
-
-  .dark\:text-blue-100 {
-    --tw-text-opacity: 1;
-    color: rgb(219 234 254 / var(--tw-text-opacity));
-  }
-
-  .dark\:shadow-slate-600 {
-    --tw-shadow-color: #475569;
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-}
-
-@media (min-width: 768px) {
-  .md\:flex {
-    display: flex;
-  }
-
-  .md\:inline-flex {
-    display: inline-flex;
-  }
-
-  .md\:table-cell {
-    display: table-cell;
-  }
-
-  .md\:table-header-group {
-    display: table-header-group;
-  }
-
-  .md\:hidden {
-    display: none;
-  }
-
-  .md\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .md\:before\:hidden::before {
-    content: var(--tw-content);
-    display: none;
-  }
-}
-
-@media (min-width: 1024px) {
-  .lg\:flex {
-    display: flex;
-  }
-
-  .lg\:inline-flex {
-    display: inline-flex;
-  }
-
-  .lg\:hidden {
-    display: none;
-  }
-}

package/priv/static/phoenix_duskmoon.js

@@ -1,60 +0,0 @@
-(() => {
-  window.addEventListener("modal:open", (evt) => {
-    const modal = evt.target;
-    if (modal.open) {
-      return;
-    }
-    const x = evt.pageX;
-    const y = evt.pageY;
-    modal.style.setProperty("--x", `calc(-50vw + ${x}px)`);
-    modal.style.setProperty("--y", `calc(-50vh + ${y}px)`);
-    modal.showModal();
-    modal.addEventListener("modal:close", (evt2) => {
-      modal.setAttribute("closing", "");
-      modal.addEventListener("animationend", () => {
-        modal.removeAttribute("closing");
-        modal.close();
-      }, { once: true });
-    }, {
-      once: true
-    });
-  });
-  const WebComponentHook = {
-    mounted() {
-      const attrs = this.el.attributes;
-      const phxTarget = attrs["phx-target"].value;
-      const pushEvent = phxTarget ? (event, payload, callback) => this.pushEventTo(phxTarget, event, payload, callback) : this.pushEvent;
-      for (var i = 0; i < attrs.length; i++) {
-        if (/^darkmoon-send-/.test(attrs[i].name)) {
-          const eventName = attrs[i].name.replace(/^darkmoon-send-/, "");
-          const [phxEvent, callbackName] = attrs[i].value.split(";");
-          this.el.addEventListener(eventName, ({ detail }) => {
-            pushEvent(phxEvent, detail, (e) => {
-              this[callbackName]?.(e, detail, eventName);
-            });
-          });
-        }
-        if (/^darkmoon-receive-/.test(attrs[i].name)) {
-          const eventName = attrs[i].name.replace(/^darkmoon-receive-/, "");
-          const handler = attrs[i].value;
-          this.handleEvent(eventName, (payload) => {
-            if (handler && this.el[handler]) {
-              this.el[handler]?.(payload);
-            } else {
-              this.el.dispatchEvent(new CustomEvent(eventName, { detail: payload }));
-            }
-          });
-        }
-        if (attrs[i].name === "darkmoon-receive") {
-          const [phxEvent, callbackName] = attrs[i].value.split(";");
-          this.handleEvent(phxEvent, (payload) => {
-            this.el[callbackName]?.(payload);
-          });
-        }
-      }
-    }
-  };
-  if (window) {
-    window.__WebComponentHook__ = WebComponentHook;
-  }
-})();