@lukso/web-components 1.69.0 → 1.70.1

package/dist/components/index.cjs

@@ -7,6 +7,7 @@ const components_luksoCard_index = require('./lukso-card/index.cjs');
 const components_luksoCheckbox_index = require('./lukso-checkbox/index.cjs');
 const components_luksoFooter_index = require('./lukso-footer/index.cjs');
 const components_luksoIcon_index = require('./lukso-icon/index.cjs');
+const components_luksoImage_index = require('./lukso-image/index.cjs');
 const components_luksoInput_index = require('./lukso-input/index.cjs');
 const components_luksoModal_index = require('./lukso-modal/index.cjs');
 const components_luksoNavbar_index = require('./lukso-navbar/index.cjs');
@@ -23,15 +24,15 @@ const components_luksoTest_index = require('./lukso-test/index.cjs');
 const components_luksoTooltip_index = require('./lukso-tooltip/index.cjs');
 const components_luksoUsername_index = require('./lukso-username/index.cjs');
 const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
-const shared_tailwindElement_index = require('../index-f0846b77.cjs');
+const shared_tailwindElement_index = require('../index-5e074b8e.cjs');
 require('../cn-5a985a94.cjs');
-require('../query-assigned-elements-1d5d9d4c.cjs');
-require('../state-f73a8b4f.cjs');
+require('../query-assigned-elements-d5e45650.cjs');
+require('../state-d9fb972b.cjs');
 require('../index-66211c85.cjs');
 require('../tailwind-config.cjs');
-require('../style-map-36078d57.cjs');
+require('../style-map-6443acae.cjs');
 require('../directive-8278ab14.cjs');
-require('../index-5bfb2237.cjs');
+require('../index-733d3158.cjs');
 require('../index-e9668573.cjs');
 
 
@@ -56,6 +57,10 @@ Object.defineProperty(exports, 'LuksoIcon', {
 	enumerable: true,
 	get: () => components_luksoIcon_index.LuksoIcon
 });
+Object.defineProperty(exports, 'LuksoImage', {
+	enumerable: true,
+	get: () => components_luksoImage_index.LuksoImage
+});
 Object.defineProperty(exports, 'LuksoInput', {
 	enumerable: true,
 	get: () => components_luksoInput_index.LuksoInput

package/dist/components/index.d.ts

@@ -3,6 +3,7 @@ export * from './lukso-card/index';
 export * from './lukso-checkbox/index';
 export * from './lukso-footer/index';
 export * from './lukso-icon/index';
+export * from './lukso-image/index';
 export * from './lukso-input/index';
 export * from './lukso-modal/index';
 export * from './lukso-navbar/index';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA"}

package/dist/components/index.js

@@ -3,6 +3,7 @@ export { LuksoCard } from './lukso-card/index.js';
 export { LuksoCheckbox } from './lukso-checkbox/index.js';
 export { LuksoFooter } from './lukso-footer/index.js';
 export { LuksoIcon } from './lukso-icon/index.js';
+export { LuksoImage } from './lukso-image/index.js';
 export { LuksoInput } from './lukso-input/index.js';
 export { LuksoModal } from './lukso-modal/index.js';
 export { LuksoNavbar } from './lukso-navbar/index.js';
@@ -19,13 +20,13 @@ export { LuksoTest } from './lukso-test/index.js';
 export { LuksoTooltip } from './lukso-tooltip/index.js';
 export { LuksoUsername } from './lukso-username/index.js';
 export { LuksoWizard } from './lukso-wizard/index.js';
-export { a as TailwindElement, T as TailwindStyledElement } from '../index-806013c2.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-a68aad08.js';
 import '../cn-e708e7fa.js';
-import '../query-assigned-elements-5d94572f.js';
-import '../state-0a779257.js';
+import '../query-assigned-elements-1c8c9e90.js';
+import '../state-b9ca4e74.js';
 import '../index-faa8c4ae.js';
 import '../tailwind-config.js';
-import '../style-map-e1ea4b4f.js';
+import '../style-map-43a6ddb8.js';
 import '../directive-2bb7789e.js';
-import '../index-cb570192.js';
+import '../index-b434231b.js';
 import '../index-5e194caf.js';

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-f0846b77.cjs');
-const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const state = require('../../state-f73a8b4f.cjs');
+const shared_tailwindElement_index = require('../../index-5e074b8e.cjs');
+const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
+const state = require('../../state-d9fb972b.cjs');
 const index = require('../../index-66211c85.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-5a985a94.cjs');

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

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, x, A } from '../../index-806013c2.js';
-import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { t } from '../../state-0a779257.js';
+import { T as TailwindStyledElement, x, A } from '../../index-a68aad08.js';
+import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
+import { t } from '../../state-b9ca4e74.js';
 import { i as ie } from '../../index-faa8c4ae.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-e708e7fa.js';

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

@@ -2,14 +2,16 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-f0846b77.cjs');
-const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-36078d57.cjs');
+const shared_tailwindElement_index = require('../../index-5e074b8e.cjs');
+const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
+const state = require('../../state-d9fb972b.cjs');
+const styleMap = require('../../style-map-6443acae.cjs');
 const index = require('../../index-66211c85.cjs');
 require('../lukso-profile/index.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-5a985a94.cjs');
-const index$1 = require('../../index-5bfb2237.cjs');
+const index$1 = require('../../index-733d3158.cjs');
+require('../lukso-image/index.cjs');
 require('../../directive-8278ab14.cjs');
 
 const style = ":host {\n  display: inline-flex;\n  width: 100%;\n}\n\n:host([width]) {\n  width: inherit;\n}";
@@ -39,52 +41,50 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     this.borderRadius = "medium";
     this.shadow = "large";
     this.isHoverable = false;
-    this.mediumStyles = `rounded-24 shadow-neutral-drop-shadow-2xl`;
-    this.smallStyles = `rounded-12 shadow-neutral-drop-shadow`;
-    this.smallHoverStyles = `hover:shadow-neutral-drop-shadow-1xl cursor-pointer transition`;
+    this.hasBottom = false;
     this.cardStyles = index.ie({
-      base: `bg-neutral-100`,
+      base: "bg-neutral-100",
       variants: {
         borderRadius: {
-          none: `rounded-0`,
-          small: `rounded-12`,
-          medium: `rounded-24`
+          none: "rounded-0",
+          small: "rounded-12",
+          medium: "rounded-24"
         },
         shadow: {
-          small: `shadow-neutral-drop-shadow`,
-          medium: `shadow-neutral-drop-shadow-1xl`,
-          large: `shadow-neutral-drop-shadow-2xl`
+          small: "shadow-neutral-drop-shadow",
+          medium: "shadow-neutral-drop-shadow-1xl",
+          large: "shadow-neutral-drop-shadow-2xl"
         },
         isHoverable: {
-          true: `cursor-pointer transition`
+          true: "cursor-pointer transition"
         },
         hasNoWidth: {
-          true: `w-full`
+          true: "w-full"
         }
       },
       compoundVariants: [
         {
           shadow: "small",
           isHoverable: true,
-          class: `hover:shadow-neutral-drop-shadow-1xl`
+          class: "hover:shadow-neutral-drop-shadow-1xl"
         },
         {
           shadow: "medium",
           isHoverable: true,
-          class: `hover:shadow-neutral-drop-shadow-2xl`
+          class: "hover:shadow-neutral-drop-shadow-2xl"
         },
         {
           shadow: "large",
           isHoverable: true,
-          class: `hover:shadow-neutral-drop-shadow-3xl`
+          class: "hover:shadow-neutral-drop-shadow-3xl"
         }
       ]
     });
   }
-  backgroundImageOrGradient() {
-    if (this.backgroundUrl) {
-      return `url('${this.backgroundUrl}')`;
-    }
+  onBottomSlotChange() {
+    this.hasBottom = this.bottomNodes.length > 0;
+  }
+  backgroundGradient() {
     let gradientStart = "#24354210";
     let gradientEnd = "#24354220";
     const opacity = "80";
@@ -120,7 +120,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       shadow: this.shadow,
       isHoverable: this.isHoverable,
       hasNoWidth: !this.width,
-      class: `grid grid-rows-[auto,1fr] overflow-hidden`
+      class: "grid grid-rows-[auto,1fr] overflow-hidden"
     });
     return shared_tailwindElement_index.x`
       <div
@@ -148,7 +148,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       shadow: this.shadow,
       isHoverable: this.isHoverable,
       hasNoWidth: !this.width,
-      class: `grid grid-rows-[1fr,auto]`
+      class: "grid grid-rows-[1fr,auto]"
     });
     return shared_tailwindElement_index.x`
       <div
@@ -161,17 +161,22 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       >
         <div
           style=${styleMap.o({
-      backgroundImage: this.backgroundImageOrGradient()
+      backgroundImage: this.backgroundGradient()
     })}
           class=${cn.cn(
-      "min-h-[92px] -mb-6 w-full bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative",
+      "min-h-[92px] -mb-6 w-full rounded-t-[inherit] rounded-b-0 relative",
       this.headerClass
     )}
         >
-          ${this.backgroundUrl && shared_tailwindElement_index.x` <div
-            class="h-full full rounded-t-[inherit] rounded-b-0 bg-neutral-20/10 absolute"
-          ></div>`}
-          <div>
+          ${this.backgroundUrl && shared_tailwindElement_index.x`<div
+              class="rounded-t-[inherit] overflow-hidden absolute inset-0"
+            >
+              <lukso-image src=${this.backgroundUrl}></lukso-image>
+            </div>
+            <div
+              class="h-full full rounded-t-[inherit] rounded-b-0 bg-neutral-20/10 absolute"
+            ></div>`}
+          <div class="relative">
             <slot name="header"></slot>
           </div>
         </div>
@@ -207,7 +212,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       shadow: this.shadow,
       isHoverable: this.isHoverable,
       hasNoWidth: !this.width,
-      class: `grid grid-rows-[auto,1fr]`
+      class: "grid grid-rows-[auto,1fr]"
     });
     return shared_tailwindElement_index.x`
       <div
@@ -220,7 +225,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       >
         <div
           style=${styleMap.o({
-      backgroundImage: this.backgroundImageOrGradient()
+      backgroundImage: this.backgroundGradient()
     })}
           class=${cn.cn(
       "min-h-[129px] -mb-6 bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative bg-neutral-100",
@@ -228,14 +233,23 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     )}
         >
           ${this.backgroundUrl && shared_tailwindElement_index.x`<div
-            class="min-h-full min-w-full rounded-t-[inherit] rounded-b-0 bg-neutral-10/10 absolute"
-          ></div>`}
+              class="rounded-t-[inherit] overflow-hidden absolute inset-0"
+            >
+              <lukso-image src=${this.backgroundUrl}></lukso-image>
+            </div>
+            <div
+              class="min-h-full min-w-full rounded-t-[inherit] rounded-b-0 bg-neutral-10/10 absolute"
+            ></div>`}
           <div>
             <slot name="header"></slot>
           </div>
         </div>
         <div class="grid grid-rows-[max-content,auto] rounded-b-[inherit]">
-          <div class="bg-neutral-100 relative">
+          <div
+            class=${cn.cn("bg-neutral-100 relative", {
+      "rounded-b-[inherit]": !this.hasBottom
+    })}
+          >
             <lukso-profile
               profile-url=${this.profileUrl}
               borderRadius="large"
@@ -255,7 +269,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
           <div
             class="bg-neutral-97 rounded-b-[inherit] shadow-neutral-inner-shadow-top"
           >
-            <slot name="bottom"></slot>
+            <slot @slotchange=${this.onBottomSlotChange} name="bottom"></slot>
           </div>
         </div>
       </div>
@@ -267,7 +281,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       shadow: this.shadow,
       isHoverable: this.isHoverable,
       hasNoWidth: !this.width,
-      class: `h-[240px] flex`
+      class: "h-[240px] flex"
     });
     return shared_tailwindElement_index.x`
       <div
@@ -279,16 +293,16 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
         class=${cn.cn(cardStyles, this.customClass)}
       >
         <div
-          style=${styleMap.o({
-      backgroundImage: `url('${this.backgroundUrl}')`
-    })}
           class="h-full w-full -mb-6 bg-center bg-cover rounded-[inherit] relative"
         >
+          <div class="rounded-[inherit] overflow-hidden absolute inset-0">
+            <lukso-image src=${this.backgroundUrl}></lukso-image>
+          </div>
           ${this.backgroundUrl && shared_tailwindElement_index.x`<div
             class="h-full w-full rounded-[inherit] bg-neutral-20/10 absolute"
           ></div>`}
           <div
-            class="h-full w-full flex flex-col items-center justify-center  absolute"
+            class="h-full w-full flex flex-col items-center justify-center absolute"
           >
             <slot name="content"></slot>
           </div>
@@ -302,7 +316,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       shadow: this.shadow,
       isHoverable: this.isHoverable,
       hasNoWidth: !this.width,
-      class: `grid grid-rows-[auto,1fr]`
+      class: "grid grid-rows-[auto,1fr]"
     });
     return shared_tailwindElement_index.x`
       <div
@@ -315,14 +329,17 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       >
         <div
           style=${styleMap.o({
-      backgroundImage: this.backgroundImageOrGradient()
+      backgroundImage: this.backgroundGradient()
     })}
           class=${cn.cn(
       "min-h-[240px] bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative",
       this.headerClass
     )}
         >
-          <div>
+          <div class="rounded-t-[inherit] overflow-hidden absolute inset-0">
+            <lukso-image src=${this.backgroundUrl}></lukso-image>
+          </div>
+          <div class="relative">
             <slot name="header"></slot>
           </div>
         </div>
@@ -384,6 +401,12 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements.n({ type: Boolean, attribute: "is-hoverable" })
 ], exports.LuksoCard.prototype, "isHoverable", 2);
+__decorateClass([
+  queryAssignedElements.l({ slot: "bottom", flatten: true })
+], exports.LuksoCard.prototype, "bottomNodes", 2);
+__decorateClass([
+  state.t()
+], exports.LuksoCard.prototype, "hasBottom", 2);
 exports.LuksoCard = __decorateClass([
   queryAssignedElements.e("lukso-card")
 ], exports.LuksoCard);

package/dist/components/lukso-card/index.d.ts

@@ -14,10 +14,10 @@ export declare class LuksoCard extends LuksoCard_base {
     borderRadius: CardBorderRadius;
     shadow: CardShadows;
     isHoverable: boolean;
-    private mediumStyles;
-    private smallStyles;
-    private smallHoverStyles;
-    private backgroundImageOrGradient;
+    private bottomNodes;
+    private hasBottom;
+    private onBottomSlotChange;
+    private backgroundGradient;
     private cardStyles;
     basicTemplate(): import("lit-html").TemplateResult<1>;
     withHeaderTemplate(): import("lit-html").TemplateResult<1>;

package/dist/components/lukso-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/index.ts"],"names":[],"mappings":"AAOA,OAAO,4BAA4B,CAAA;AAInC,MAAM,MAAM,YAAY,GACpB,OAAO,GACP,aAAa,GACb,SAAS,GACT,WAAW,GACX,MAAM,GACN,MAAM,CAAA;AAEV,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE1D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;;AAEtD,qBACa,SAAU,SAAQ,cAA4B;IAEzD,OAAO,EAAE,YAAY,CAAU;IAG/B,aAAa,SAAK;IAGlB,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAGtC,WAAW,SAAK;IAGhB,WAAW,SAAK;IAGhB,YAAY,EAAE,gBAAgB,CAAW;IAGzC,MAAM,EAAE,WAAW,CAAU;IAG7B,WAAW,UAAQ;IAEnB,OAAO,CAAC,YAAY,CAA8C;IAClE,OAAO,CAAC,WAAW,CAA0C;IAC7D,OAAO,CAAC,gBAAgB,CAAmE;IAE3F,OAAO,CAAC,yBAAyB;IAiBjC,OAAO,CAAC,UAAU,CAqChB;IAEF,aAAa;IAsBb,kBAAkB;IA8BlB,eAAe;IA8Df,gBAAgB;IA+DhB,YAAY;IAsCZ,YAAY;IAwCZ,MAAM;CAgBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/index.ts"],"names":[],"mappings":"AAYA,OAAO,4BAA4B,CAAA;AAGnC,OAAO,0BAA0B,CAAA;AAEjC,MAAM,MAAM,YAAY,GACpB,OAAO,GACP,aAAa,GACb,SAAS,GACT,WAAW,GACX,MAAM,GACN,MAAM,CAAA;AAEV,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE1D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;;AAEtD,qBACa,SAAU,SAAQ,cAA4B;IAEzD,OAAO,EAAE,YAAY,CAAU;IAG/B,aAAa,SAAK;IAGlB,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAGtC,WAAW,SAAK;IAGhB,WAAW,SAAK;IAGhB,YAAY,EAAE,gBAAgB,CAAW;IAGzC,MAAM,EAAE,WAAW,CAAU;IAG7B,WAAW,UAAQ;IAGnB,OAAO,CAAC,WAAW,CAAyB;IAG5C,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,UAAU,CAqChB;IAEF,aAAa;IAsBb,kBAAkB;IA8BlB,eAAe;IAmEf,gBAAgB;IAwEhB,YAAY;IAsCZ,YAAY;IA2CZ,MAAM;CAgBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}

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

@@ -1,11 +1,13 @@
-import { T as TailwindStyledElement, x } from '../../index-806013c2.js';
-import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-e1ea4b4f.js';
+import { T as TailwindStyledElement, x } from '../../index-a68aad08.js';
+import { n, l, e } from '../../query-assigned-elements-1c8c9e90.js';
+import { t } from '../../state-b9ca4e74.js';
+import { o } from '../../style-map-43a6ddb8.js';
 import { i as ie } from '../../index-faa8c4ae.js';
 import '../lukso-profile/index.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-e708e7fa.js';
-import { c as customStyleMap } from '../../index-cb570192.js';
+import { c as customStyleMap } from '../../index-b434231b.js';
+import '../lukso-image/index.js';
 import '../../directive-2bb7789e.js';
 
 const style = ":host {\n  display: inline-flex;\n  width: 100%;\n}\n\n:host([width]) {\n  width: inherit;\n}";
@@ -35,52 +37,50 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     this.borderRadius = "medium";
     this.shadow = "large";
     this.isHoverable = false;
-    this.mediumStyles = `rounded-24 shadow-neutral-drop-shadow-2xl`;
-    this.smallStyles = `rounded-12 shadow-neutral-drop-shadow`;
-    this.smallHoverStyles = `hover:shadow-neutral-drop-shadow-1xl cursor-pointer transition`;
+    this.hasBottom = false;
     this.cardStyles = ie({
-      base: `bg-neutral-100`,
+      base: "bg-neutral-100",
       variants: {
         borderRadius: {
-          none: `rounded-0`,
-          small: `rounded-12`,
-          medium: `rounded-24`
+          none: "rounded-0",
+          small: "rounded-12",
+          medium: "rounded-24"
         },
         shadow: {
-          small: `shadow-neutral-drop-shadow`,
-          medium: `shadow-neutral-drop-shadow-1xl`,
-          large: `shadow-neutral-drop-shadow-2xl`
+          small: "shadow-neutral-drop-shadow",
+          medium: "shadow-neutral-drop-shadow-1xl",
+          large: "shadow-neutral-drop-shadow-2xl"
         },
         isHoverable: {
-          true: `cursor-pointer transition`
+          true: "cursor-pointer transition"
         },
         hasNoWidth: {
-          true: `w-full`
+          true: "w-full"
         }
       },
       compoundVariants: [
         {
           shadow: "small",
           isHoverable: true,
-          class: `hover:shadow-neutral-drop-shadow-1xl`
+          class: "hover:shadow-neutral-drop-shadow-1xl"
         },
         {
           shadow: "medium",
           isHoverable: true,
-          class: `hover:shadow-neutral-drop-shadow-2xl`
+          class: "hover:shadow-neutral-drop-shadow-2xl"
         },
         {
           shadow: "large",
           isHoverable: true,
-          class: `hover:shadow-neutral-drop-shadow-3xl`
+          class: "hover:shadow-neutral-drop-shadow-3xl"
         }
       ]
     });
   }
-  backgroundImageOrGradient() {
-    if (this.backgroundUrl) {
-      return `url('${this.backgroundUrl}')`;
-    }
+  onBottomSlotChange() {
+    this.hasBottom = this.bottomNodes.length > 0;
+  }
+  backgroundGradient() {
     let gradientStart = "#24354210";
     let gradientEnd = "#24354220";
     const opacity = "80";
@@ -116,7 +116,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       shadow: this.shadow,
       isHoverable: this.isHoverable,
       hasNoWidth: !this.width,
-      class: `grid grid-rows-[auto,1fr] overflow-hidden`
+      class: "grid grid-rows-[auto,1fr] overflow-hidden"
     });
     return x`
       <div
@@ -144,7 +144,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       shadow: this.shadow,
       isHoverable: this.isHoverable,
       hasNoWidth: !this.width,
-      class: `grid grid-rows-[1fr,auto]`
+      class: "grid grid-rows-[1fr,auto]"
     });
     return x`
       <div
@@ -157,17 +157,22 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       >
         <div
           style=${o({
-      backgroundImage: this.backgroundImageOrGradient()
+      backgroundImage: this.backgroundGradient()
     })}
           class=${cn(
-      "min-h-[92px] -mb-6 w-full bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative",
+      "min-h-[92px] -mb-6 w-full rounded-t-[inherit] rounded-b-0 relative",
       this.headerClass
     )}
         >
-          ${this.backgroundUrl && x` <div
-            class="h-full full rounded-t-[inherit] rounded-b-0 bg-neutral-20/10 absolute"
-          ></div>`}
-          <div>
+          ${this.backgroundUrl && x`<div
+              class="rounded-t-[inherit] overflow-hidden absolute inset-0"
+            >
+              <lukso-image src=${this.backgroundUrl}></lukso-image>
+            </div>
+            <div
+              class="h-full full rounded-t-[inherit] rounded-b-0 bg-neutral-20/10 absolute"
+            ></div>`}
+          <div class="relative">
             <slot name="header"></slot>
           </div>
         </div>
@@ -203,7 +208,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       shadow: this.shadow,
       isHoverable: this.isHoverable,
       hasNoWidth: !this.width,
-      class: `grid grid-rows-[auto,1fr]`
+      class: "grid grid-rows-[auto,1fr]"
     });
     return x`
       <div
@@ -216,7 +221,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       >
         <div
           style=${o({
-      backgroundImage: this.backgroundImageOrGradient()
+      backgroundImage: this.backgroundGradient()
     })}
           class=${cn(
       "min-h-[129px] -mb-6 bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative bg-neutral-100",
@@ -224,14 +229,23 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     )}
         >
           ${this.backgroundUrl && x`<div
-            class="min-h-full min-w-full rounded-t-[inherit] rounded-b-0 bg-neutral-10/10 absolute"
-          ></div>`}
+              class="rounded-t-[inherit] overflow-hidden absolute inset-0"
+            >
+              <lukso-image src=${this.backgroundUrl}></lukso-image>
+            </div>
+            <div
+              class="min-h-full min-w-full rounded-t-[inherit] rounded-b-0 bg-neutral-10/10 absolute"
+            ></div>`}
           <div>
             <slot name="header"></slot>
           </div>
         </div>
         <div class="grid grid-rows-[max-content,auto] rounded-b-[inherit]">
-          <div class="bg-neutral-100 relative">
+          <div
+            class=${cn("bg-neutral-100 relative", {
+      "rounded-b-[inherit]": !this.hasBottom
+    })}
+          >
             <lukso-profile
               profile-url=${this.profileUrl}
               borderRadius="large"
@@ -251,7 +265,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
           <div
             class="bg-neutral-97 rounded-b-[inherit] shadow-neutral-inner-shadow-top"
           >
-            <slot name="bottom"></slot>
+            <slot @slotchange=${this.onBottomSlotChange} name="bottom"></slot>
           </div>
         </div>
       </div>
@@ -263,7 +277,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       shadow: this.shadow,
       isHoverable: this.isHoverable,
       hasNoWidth: !this.width,
-      class: `h-[240px] flex`
+      class: "h-[240px] flex"
     });
     return x`
       <div
@@ -275,16 +289,16 @@ let LuksoCard = class extends TailwindStyledElement(style) {
         class=${cn(cardStyles, this.customClass)}
       >
         <div
-          style=${o({
-      backgroundImage: `url('${this.backgroundUrl}')`
-    })}
           class="h-full w-full -mb-6 bg-center bg-cover rounded-[inherit] relative"
         >
+          <div class="rounded-[inherit] overflow-hidden absolute inset-0">
+            <lukso-image src=${this.backgroundUrl}></lukso-image>
+          </div>
           ${this.backgroundUrl && x`<div
             class="h-full w-full rounded-[inherit] bg-neutral-20/10 absolute"
           ></div>`}
           <div
-            class="h-full w-full flex flex-col items-center justify-center  absolute"
+            class="h-full w-full flex flex-col items-center justify-center absolute"
           >
             <slot name="content"></slot>
           </div>
@@ -298,7 +312,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       shadow: this.shadow,
       isHoverable: this.isHoverable,
       hasNoWidth: !this.width,
-      class: `grid grid-rows-[auto,1fr]`
+      class: "grid grid-rows-[auto,1fr]"
     });
     return x`
       <div
@@ -311,14 +325,17 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       >
         <div
           style=${o({
-      backgroundImage: this.backgroundImageOrGradient()
+      backgroundImage: this.backgroundGradient()
     })}
           class=${cn(
       "min-h-[240px] bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative",
       this.headerClass
     )}
         >
-          <div>
+          <div class="rounded-t-[inherit] overflow-hidden absolute inset-0">
+            <lukso-image src=${this.backgroundUrl}></lukso-image>
+          </div>
+          <div class="relative">
             <slot name="header"></slot>
           </div>
         </div>
@@ -380,6 +397,12 @@ __decorateClass([
 __decorateClass([
   n({ type: Boolean, attribute: "is-hoverable" })
 ], LuksoCard.prototype, "isHoverable", 2);
+__decorateClass([
+  l({ slot: "bottom", flatten: true })
+], LuksoCard.prototype, "bottomNodes", 2);
+__decorateClass([
+  t()
+], LuksoCard.prototype, "hasBottom", 2);
 LuksoCard = __decorateClass([
   e("lukso-card")
 ], LuksoCard);