@lukso/web-components 1.172.13 → 1.172.14

package/dist/components/lukso-card/index.cjs

@@ -2,31 +2,26 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const components_luksoProfile_index = require('../../chunks/index-BAf8Hzhe.js');
-const shared_tailwindElement_index = require('../../chunks/index-BxQ_0s_1.js');
-const property = require('../../chunks/property-D6IL6zax.js');
-const state = require('../../chunks/state-CFjY89m3.js');
-const base = require('../../chunks/base-NFGX42U4.js');
-const styleMap = require('../../chunks/style-map-B7XFhSOK.js');
-const index = require('../../chunks/index-CaJky2qL.js');
+const makeBlockie = require('ethereum-blockies-base64');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const styleMap = require('../../chunks/style-map-AEeBQfPb.js');
+const tailwindVariants = require('tailwind-variants');
 const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const shared_tailwindElement_index = require('../../shared/tailwind-element/index.cjs');
+require('../lukso-profile/index.cjs');
 require('../../tailwind-config.cjs');
-const axe = require('../../chunks/axe-MHuN9KU0.js');
-const isAddress = require('../../chunks/isAddress-B1R_6-uN.js');
-const index$1 = require('../../chunks/index-C5YyB6ug.js');
+const cn = require('../../chunks/cn-zamUNFMe.js');
+const viem = require('viem');
+require('axe-core');
+const index = require('../../chunks/index-DvLZWpq9.js');
 require('../lukso-image/index.cjs');
 
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */function o(o){return (e,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?`[name=${r}]`:":not([name])");return base.e(e,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter((t=>t.matches(s)))}})}}
-
 const backgroundGradient = (address) => {
   let gradientStart = "#24354210";
   let gradientEnd = "#24354220";
   const opacity = "80";
-  if (address && isAddress.isAddress(address)) {
+  if (address && viem.isAddress(address)) {
     gradientStart = `#${address.slice(2, 8)}${opacity}`;
     gradientEnd = `#${address.slice(36, 42)}${opacity}`;
   }
@@ -60,7 +55,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     this.hasOverlay = false;
     this.isEoa = false;
     this.hasBottom = false;
-    this.cardStyles = index.ce({
+    this.cardStyles = tailwindVariants.tv({
       base: "bg-neutral-100",
       variants: {
         borderRadius: {
@@ -109,14 +104,14 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       isHoverable: this.isHoverable,
       hasNoWidth: !this.width
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div
         data-testid="card"
-        style=${index$1.customStyleMap({
+        style=${index.customStyleMap({
       [`min-height: ${this.height}px`]: !!this.height,
       [`width: ${this.width}px`]: !!this.width
     })}
-        class=${axe.cn(cardStyles, this.customClass)}
+        class=${cn.cn(cardStyles, this.customClass)}
       >
         <slot name="content"></slot>
       </div>
@@ -130,14 +125,14 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       hasNoWidth: !this.width,
       class: "grid grid-rows-[auto,1fr] overflow-hidden"
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div
         data-testid="card"
         style=${styleMap.o({
       minHeight: `${this.height}px`,
       width: `${this.width}px`
     })}
-        class=${axe.cn(cardStyles, this.customClass)}
+        class=${cn.cn(cardStyles, this.customClass)}
       >
         <div class=${this.headerClass}>
           <slot name="header"></slot>
@@ -158,45 +153,45 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       hasNoWidth: !this.width,
       class: "grid grid-rows-[1fr,auto]"
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div
         data-testid="card"
-        style=${index$1.customStyleMap({
+        style=${index.customStyleMap({
       [`min-height: ${this.height}px`]: !!this.height,
       [`width: ${this.width}px`]: !!this.width
     })}
-        class=${axe.cn(cardStyles, this.customClass)}
+        class=${cn.cn(cardStyles, this.customClass)}
       >
         <div
           style=${styleMap.o({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
-          class=${axe.cn(
+          class=${cn.cn(
       "min-h-[92px] -mb-6 w-full rounded-t-[inherit] rounded-b-0 relative",
       this.headerClass
     )}
         >
-          ${this.backgroundUrl && shared_tailwindElement_index.x`<div
+          ${this.backgroundUrl && lit.html`<div
             class="rounded-t-[inherit] overflow-hidden absolute inset-0"
           >
             <lukso-image src=${this.backgroundUrl}></lukso-image>
           </div>`}
-          ${this.hasOverlay ? shared_tailwindElement_index.x`<div
+          ${this.hasOverlay ? lit.html`<div
                 class="h-full full rounded-t-[inherit] rounded-b-0 bg-neutral-20/10 absolute"
-              ></div>` : shared_tailwindElement_index.E}
+              ></div>` : lit.nothing}
           <div class="relative h-full">
             <slot name="header"></slot>
           </div>
         </div>
 
         <div
-          style=${index$1.customStyleMap({
+          style=${index.customStyleMap({
       [`width: ${this.width}px`]: !!this.width
     })}
           class="bg-neutral-100 rounded-[inherit] relative break-normal"
         >
           <lukso-profile
-            profile-url=${this.isEoa ? components_luksoProfile_index.makeBlockie(this.profileAddress) : this.profileUrl}
+            profile-url=${this.isEoa ? makeBlockie(this.profileAddress) : this.profileUrl}
             borderRadius="large"
             profile-address=${this.profileAddress}
             ?has-identicon=${!this.isEoa}
@@ -222,25 +217,25 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       hasNoWidth: !this.width,
       class: "grid grid-rows-[auto,1fr]"
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div
         data-testid="card"
-        style=${index$1.customStyleMap({
+        style=${index.customStyleMap({
       [`min-height: ${this.height}px`]: !!this.height,
       [`width: ${this.width}px`]: !!this.width
     })}
-        class=${axe.cn(cardStyles, this.customClass)}
+        class=${cn.cn(cardStyles, this.customClass)}
       >
         <div
           style=${styleMap.o({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
-          class=${axe.cn(
+          class=${cn.cn(
       "min-h-[129px] -mb-6 bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative bg-neutral-100",
       this.headerClass
     )}
         >
-          ${this.backgroundUrl && shared_tailwindElement_index.x`<div
+          ${this.backgroundUrl && lit.html`<div
               class="rounded-t-[inherit] overflow-hidden absolute inset-0"
             >
               <lukso-image src=${this.backgroundUrl}></lukso-image>
@@ -254,12 +249,12 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
         </div>
         <div class="grid grid-rows-[max-content,auto] rounded-b-[inherit]">
           <div
-            class=${axe.cn("bg-neutral-100 relative", {
+            class=${cn.cn("bg-neutral-100 relative", {
       "rounded-b-[inherit]": !this.hasBottom
     })}
           >
             <lukso-profile
-              profile-url=${this.isEoa ? components_luksoProfile_index.makeBlockie(this.profileAddress) : this.profileUrl}
+              profile-url=${this.isEoa ? makeBlockie(this.profileAddress) : this.profileUrl}
               borderRadius="large"
               profile-address=${this.profileAddress}
               ?has-identicon=${!this.isEoa}
@@ -291,25 +286,25 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       hasNoWidth: !this.width,
       class: "grid grid-rows-[auto,1fr]"
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div
         data-testid="card"
-        style=${index$1.customStyleMap({
+        style=${index.customStyleMap({
       [`min-height: ${this.height}px`]: !!this.height,
       [`width: ${this.width}px`]: !!this.width
     })}
-        class=${axe.cn(cardStyles, this.customClass)}
+        class=${cn.cn(cardStyles, this.customClass)}
       >
         <div
           style=${styleMap.o({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
-          class=${axe.cn(
+          class=${cn.cn(
       "min-h-10 bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative bg-neutral-100",
       this.headerClass
     )}
         >
-          ${this.backgroundUrl && shared_tailwindElement_index.x`<div
+          ${this.backgroundUrl && lit.html`<div
               class="rounded-t-[inherit] overflow-hidden absolute inset-0"
             >
               <lukso-image src=${this.backgroundUrl}></lukso-image>
@@ -324,7 +319,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
         <div class="grid grid-rows-[max-content] rounded-b-[inherit]">
           <div class="bg-neutral-100 relative pt-5 rounded-b-[inherit]">
             <lukso-profile
-              profile-url=${this.isEoa ? components_luksoProfile_index.makeBlockie(this.profileAddress) : this.profileUrl}
+              profile-url=${this.isEoa ? makeBlockie(this.profileAddress) : this.profileUrl}
               borderRadius="large"
               profile-address=${this.profileAddress}
               ?has-identicon=${!this.isEoa}
@@ -346,25 +341,25 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       hasNoWidth: !this.width,
       class: "flex"
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div
         data-testid="card"
-        style=${index$1.customStyleMap({
+        style=${index.customStyleMap({
       [`min-height: ${this.height}px`]: !!this.height,
       "min-height: 240px": !this.height,
       [`width: ${this.width}px`]: !!this.width
     })}
-        class=${axe.cn(cardStyles, this.customClass)}
+        class=${cn.cn(cardStyles, this.customClass)}
       >
         <div
           class="h-full w-full -mb-6 bg-center bg-cover rounded-[inherit] relative"
         >
-          ${this.backgroundUrl && shared_tailwindElement_index.x`<div class="rounded-[inherit] overflow-hidden absolute inset-0">
+          ${this.backgroundUrl && lit.html`<div class="rounded-[inherit] overflow-hidden absolute inset-0">
             <lukso-image src=${this.backgroundUrl}></lukso-image>
           </div>`}
-          ${this.hasOverlay && this.backgroundUrl ? shared_tailwindElement_index.x`<div
+          ${this.hasOverlay && this.backgroundUrl ? lit.html`<div
                 class="h-full w-full rounded-[inherit] bg-neutral-20/10 absolute"
-              ></div>` : shared_tailwindElement_index.E}
+              ></div>` : lit.nothing}
           <div
             class="h-full w-full flex flex-col items-center justify-center absolute"
           >
@@ -382,25 +377,25 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       hasNoWidth: !this.width,
       class: "grid grid-rows-[auto,1fr]"
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div
         data-testid="card"
-        style=${index$1.customStyleMap({
+        style=${index.customStyleMap({
       [`min-height: ${this.height}px`]: !!this.height,
       [`width: ${this.width}px`]: !!this.width
     })}
-        class=${axe.cn(cardStyles, this.customClass)}
+        class=${cn.cn(cardStyles, this.customClass)}
       >
         <div
           style=${styleMap.o({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
-          class=${axe.cn(
+          class=${cn.cn(
       "min-h-[inherit] bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative",
       this.headerClass
     )}
         >
-          ${this.backgroundUrl && shared_tailwindElement_index.x`
+          ${this.backgroundUrl && lit.html`
             <div class="rounded-t-[inherit] overflow-hidden absolute inset-0">
               <lukso-image src=${this.backgroundUrl}></lukso-image>
             </div>
@@ -435,49 +430,49 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCard.prototype, "variant", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "background-url" })
+  decorators_js.property({ type: String, attribute: "background-url" })
 ], exports.LuksoCard.prototype, "backgroundUrl", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "profile-url" })
+  decorators_js.property({ type: String, attribute: "profile-url" })
 ], exports.LuksoCard.prototype, "profileUrl", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "profile-address" })
+  decorators_js.property({ type: String, attribute: "profile-address" })
 ], exports.LuksoCard.prototype, "profileAddress", 2);
 __decorateClass([
-  property.n({ type: Number })
+  decorators_js.property({ type: Number })
 ], exports.LuksoCard.prototype, "width", 2);
 __decorateClass([
-  property.n({ type: Number })
+  decorators_js.property({ type: Number })
 ], exports.LuksoCard.prototype, "height", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "custom-class" })
+  decorators_js.property({ type: String, attribute: "custom-class" })
 ], exports.LuksoCard.prototype, "customClass", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "header-class" })
+  decorators_js.property({ type: String, attribute: "header-class" })
 ], exports.LuksoCard.prototype, "headerClass", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "border-radius" })
+  decorators_js.property({ type: String, attribute: "border-radius" })
 ], exports.LuksoCard.prototype, "borderRadius", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCard.prototype, "shadow", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-hoverable" })
+  decorators_js.property({ type: Boolean, attribute: "is-hoverable" })
 ], exports.LuksoCard.prototype, "isHoverable", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "has-overlay" })
+  decorators_js.property({ type: Boolean, attribute: "has-overlay" })
 ], exports.LuksoCard.prototype, "hasOverlay", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-eoa" })
+  decorators_js.property({ type: Boolean, attribute: "is-eoa" })
 ], exports.LuksoCard.prototype, "isEoa", 2);
 __decorateClass([
-  o({ slot: "bottom", flatten: true })
+  decorators_js.queryAssignedElements({ slot: "bottom", flatten: true })
 ], exports.LuksoCard.prototype, "bottomNodes", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoCard.prototype, "hasBottom", 2);
 exports.LuksoCard = __decorateClass([
   safeCustomElement.safeCustomElement("lukso-card")

package/dist/components/lukso-card/index.js

@@ -1,23 +1,18 @@
-import { m as makeBlockie } from '../../chunks/index-BDyLu6M0.js';
-import { b as TailwindStyledElement, x, E } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { r } from '../../chunks/state-CaelFSbE.js';
-import { e } from '../../chunks/base-Cl6v8-BZ.js';
-import { o as o$1 } from '../../chunks/style-map-BPljJihp.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
+import makeBlockie from 'ethereum-blockies-base64';
+import { html, nothing } from 'lit';
+import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import { o } from '../../chunks/style-map-auscxO0L.js';
+import { tv } from 'tailwind-variants';
 import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { TailwindStyledElement } from '../../shared/tailwind-element/index.js';
+import '../lukso-profile/index.js';
 import '../../tailwind-config.js';
-import { c as cn } from '../../chunks/axe-DJKac19y.js';
-import { i as isAddress } from '../../chunks/isAddress-BUdSrCaY.js';
-import { c as customStyleMap } from '../../chunks/index-CZGvLdJ0.js';
+import { c as cn } from '../../chunks/cn-LM_JlZIN.js';
+import { isAddress } from 'viem';
+import 'axe-core';
+import { c as customStyleMap } from '../../chunks/index-CqZm8OfY.js';
 import '../lukso-image/index.js';
 
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */function o(o){return (e$1,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?`[name=${r}]`:":not([name])");return e(e$1,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter((t=>t.matches(s)))}})}}
-
 const backgroundGradient = (address) => {
   let gradientStart = "#24354210";
   let gradientEnd = "#24354220";
@@ -56,7 +51,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     this.hasOverlay = false;
     this.isEoa = false;
     this.hasBottom = false;
-    this.cardStyles = ce({
+    this.cardStyles = tv({
       base: "bg-neutral-100",
       variants: {
         borderRadius: {
@@ -105,7 +100,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       isHoverable: this.isHoverable,
       hasNoWidth: !this.width
     });
-    return x`
+    return html`
       <div
         data-testid="card"
         style=${customStyleMap({
@@ -126,10 +121,10 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       hasNoWidth: !this.width,
       class: "grid grid-rows-[auto,1fr] overflow-hidden"
     });
-    return x`
+    return html`
       <div
         data-testid="card"
-        style=${o$1({
+        style=${o({
       minHeight: `${this.height}px`,
       width: `${this.width}px`
     })}
@@ -154,7 +149,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       hasNoWidth: !this.width,
       class: "grid grid-rows-[1fr,auto]"
     });
-    return x`
+    return html`
       <div
         data-testid="card"
         style=${customStyleMap({
@@ -164,7 +159,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
         class=${cn(cardStyles, this.customClass)}
       >
         <div
-          style=${o$1({
+          style=${o({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn(
@@ -172,14 +167,14 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       this.headerClass
     )}
         >
-          ${this.backgroundUrl && x`<div
+          ${this.backgroundUrl && html`<div
             class="rounded-t-[inherit] overflow-hidden absolute inset-0"
           >
             <lukso-image src=${this.backgroundUrl}></lukso-image>
           </div>`}
-          ${this.hasOverlay ? x`<div
+          ${this.hasOverlay ? html`<div
                 class="h-full full rounded-t-[inherit] rounded-b-0 bg-neutral-20/10 absolute"
-              ></div>` : E}
+              ></div>` : nothing}
           <div class="relative h-full">
             <slot name="header"></slot>
           </div>
@@ -218,7 +213,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       hasNoWidth: !this.width,
       class: "grid grid-rows-[auto,1fr]"
     });
-    return x`
+    return html`
       <div
         data-testid="card"
         style=${customStyleMap({
@@ -228,7 +223,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
         class=${cn(cardStyles, this.customClass)}
       >
         <div
-          style=${o$1({
+          style=${o({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn(
@@ -236,7 +231,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       this.headerClass
     )}
         >
-          ${this.backgroundUrl && x`<div
+          ${this.backgroundUrl && html`<div
               class="rounded-t-[inherit] overflow-hidden absolute inset-0"
             >
               <lukso-image src=${this.backgroundUrl}></lukso-image>
@@ -287,7 +282,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       hasNoWidth: !this.width,
       class: "grid grid-rows-[auto,1fr]"
     });
-    return x`
+    return html`
       <div
         data-testid="card"
         style=${customStyleMap({
@@ -297,7 +292,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
         class=${cn(cardStyles, this.customClass)}
       >
         <div
-          style=${o$1({
+          style=${o({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn(
@@ -305,7 +300,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       this.headerClass
     )}
         >
-          ${this.backgroundUrl && x`<div
+          ${this.backgroundUrl && html`<div
               class="rounded-t-[inherit] overflow-hidden absolute inset-0"
             >
               <lukso-image src=${this.backgroundUrl}></lukso-image>
@@ -342,7 +337,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       hasNoWidth: !this.width,
       class: "flex"
     });
-    return x`
+    return html`
       <div
         data-testid="card"
         style=${customStyleMap({
@@ -355,12 +350,12 @@ let LuksoCard = class extends TailwindStyledElement(style) {
         <div
           class="h-full w-full -mb-6 bg-center bg-cover rounded-[inherit] relative"
         >
-          ${this.backgroundUrl && x`<div class="rounded-[inherit] overflow-hidden absolute inset-0">
+          ${this.backgroundUrl && html`<div class="rounded-[inherit] overflow-hidden absolute inset-0">
             <lukso-image src=${this.backgroundUrl}></lukso-image>
           </div>`}
-          ${this.hasOverlay && this.backgroundUrl ? x`<div
+          ${this.hasOverlay && this.backgroundUrl ? html`<div
                 class="h-full w-full rounded-[inherit] bg-neutral-20/10 absolute"
-              ></div>` : E}
+              ></div>` : nothing}
           <div
             class="h-full w-full flex flex-col items-center justify-center absolute"
           >
@@ -378,7 +373,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       hasNoWidth: !this.width,
       class: "grid grid-rows-[auto,1fr]"
     });
-    return x`
+    return html`
       <div
         data-testid="card"
         style=${customStyleMap({
@@ -388,7 +383,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
         class=${cn(cardStyles, this.customClass)}
       >
         <div
-          style=${o$1({
+          style=${o({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn(
@@ -396,7 +391,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       this.headerClass
     )}
         >
-          ${this.backgroundUrl && x`
+          ${this.backgroundUrl && html`
             <div class="rounded-t-[inherit] overflow-hidden absolute inset-0">
               <lukso-image src=${this.backgroundUrl}></lukso-image>
             </div>
@@ -431,49 +426,49 @@ let LuksoCard = class extends TailwindStyledElement(style) {
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCard.prototype, "variant", 2);
 __decorateClass([
-  n({ type: String, attribute: "background-url" })
+  property({ type: String, attribute: "background-url" })
 ], LuksoCard.prototype, "backgroundUrl", 2);
 __decorateClass([
-  n({ type: String, attribute: "profile-url" })
+  property({ type: String, attribute: "profile-url" })
 ], LuksoCard.prototype, "profileUrl", 2);
 __decorateClass([
-  n({ type: String, attribute: "profile-address" })
+  property({ type: String, attribute: "profile-address" })
 ], LuksoCard.prototype, "profileAddress", 2);
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoCard.prototype, "width", 2);
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoCard.prototype, "height", 2);
 __decorateClass([
-  n({ type: String, attribute: "custom-class" })
+  property({ type: String, attribute: "custom-class" })
 ], LuksoCard.prototype, "customClass", 2);
 __decorateClass([
-  n({ type: String, attribute: "header-class" })
+  property({ type: String, attribute: "header-class" })
 ], LuksoCard.prototype, "headerClass", 2);
 __decorateClass([
-  n({ type: String, attribute: "border-radius" })
+  property({ type: String, attribute: "border-radius" })
 ], LuksoCard.prototype, "borderRadius", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCard.prototype, "shadow", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-hoverable" })
+  property({ type: Boolean, attribute: "is-hoverable" })
 ], LuksoCard.prototype, "isHoverable", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "has-overlay" })
+  property({ type: Boolean, attribute: "has-overlay" })
 ], LuksoCard.prototype, "hasOverlay", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-eoa" })
+  property({ type: Boolean, attribute: "is-eoa" })
 ], LuksoCard.prototype, "isEoa", 2);
 __decorateClass([
-  o({ slot: "bottom", flatten: true })
+  queryAssignedElements({ slot: "bottom", flatten: true })
 ], LuksoCard.prototype, "bottomNodes", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoCard.prototype, "hasBottom", 2);
 LuksoCard = __decorateClass([
   safeCustomElement("lukso-card")