@mhmo91/schmancy 0.4.93 → 0.4.95

package/dist/{media-nVQjNoX7.js → media-DruoNHFP.js}

@@ -1,12 +1,12 @@
 import "rxjs";
-import { classMap as g } from "lit/directives/class-map.js";
+import { classMap as v } from "lit/directives/class-map.js";
 import "lit/directives/style-map.js";
-import { customElement as y, property as c, state as u } from "lit/decorators.js";
-import { T as v } from "./tailwind.mixin-C13RR5x6.js";
+import { customElement as u, property as d, state as y } from "lit/decorators.js";
+import { T as f } from "./tailwind.mixin-BYp3JxPB.js";
 import { css as b, html as h, LitElement as w } from "lit";
 import { ifDefined as x } from "lit/directives/if-defined.js";
 var k = Object.getOwnPropertyDescriptor;
-let f = class extends v(b`
+let m = class extends f(b`
 	:host {
 		display: flex;
 		gap: 0.5rem;
@@ -19,83 +19,71 @@ let f = class extends v(b`
     return h`<slot></slot>`;
   }
 };
-f = ((t, s, r, i) => {
-  for (var o, e = i > 1 ? void 0 : i ? k(s, r) : s, a = t.length - 1; a >= 0; a--) (o = t[a]) && (e = o(e) || e);
-  return e;
-})([y("schmancy-card-action")], f);
-var $ = Object.defineProperty, j = Object.getOwnPropertyDescriptor, l = (t, s, r, i) => {
-  for (var o, e = i > 1 ? void 0 : i ? j(s, r) : s, a = t.length - 1; a >= 0; a--) (o = t[a]) && (e = (i ? o(s, r, e) : o(e)) || e);
-  return i && e && $(s, r, e), e;
+m = ((e, s, r, i) => {
+  for (var o, t = i > 1 ? void 0 : i ? k(s, r) : s, a = e.length - 1; a >= 0; a--) (o = e[a]) && (t = o(t) || t);
+  return t;
+})([u("schmancy-card-action")], m);
+var O = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, n = (e, s, r, i) => {
+  for (var o, t = i > 1 ? void 0 : i ? $(s, r) : s, a = e.length - 1; a >= 0; a--) (o = e[a]) && (t = (i ? o(s, r, t) : o(t)) || t);
+  return i && t && O(s, r, t), t;
 };
-let n = class extends v(b`
+let l = class extends f(b`
 	:host {
 		display: block;
 		position: relative;
 		border-radius: 12px; /* M3 spec: 12px for cards */
-		transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+		transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
 		outline: none;
 	}
 
 	/* Type-specific base styles */
 	:host([type='elevated']) {
 		background-color: var(--schmancy-sys-color-surface-low);
-		box-shadow: var(--schmancy-sys-elevation-1);
+		box-shadow: var(--shadow-1);
 	}
 
 	:host([type='filled']) {
 		background-color: var(--schmancy-sys-color-surface-highest);
-		box-shadow: var(--schmancy-sys-elevation-0);
+		box-shadow: var(--shadow-0);
 	}
 
 	:host([type='outlined']) {
 		background-color: var(--schmancy-sys-color-surface-default);
-		border: 1px solid var(--schmancy-sys-color-outline-variant);
-		box-shadow: var(--schmancy-sys-elevation-0);
+		border: 1px solid var(--schmancy-sys-color-outlineVariant);
+		box-shadow: var(--shadow-0);
 	}
 
-	/* Interactive state layers */
+	/* Interactive state */
 	:host([interactive]) {
 		cursor: pointer;
 		-webkit-tap-highlight-color: transparent;
 	}
 
-	:host([interactive]:hover:not([disabled])) .state-layer {
-		opacity: 0.08;
-	}
-
-	:host([interactive]:focus-visible:not([disabled])) .state-layer {
-		opacity: 0.12;
-	}
-
-	:host([interactive][pressed]:not([disabled])) .state-layer {
-		opacity: 0.12;
-	}
-
 	/* Elevated interactive states */
 	:host([type='elevated'][interactive]:hover:not([disabled])) {
-		box-shadow: var(--schmancy-sys-elevation-2);
+		box-shadow: var(--shadow-2);
 	}
 
 	:host([type='elevated'][dragged]) {
-		box-shadow: var(--schmancy-sys-elevation-3);
+		box-shadow: var(--shadow-3);
 	}
 
 	/* Filled interactive states */
 	:host([type='filled'][interactive]:hover:not([disabled])) {
-		box-shadow: var(--schmancy-sys-elevation-1);
+		box-shadow: var(--shadow-1);
 	}
 
 	:host([type='filled'][dragged]) {
-		box-shadow: var(--schmancy-sys-elevation-3);
+		box-shadow: var(--shadow-3);
 	}
 
 	/* Outlined interactive states */
 	:host([type='outlined'][interactive]:hover:not([disabled])) {
-		box-shadow: var(--schmancy-sys-elevation-1);
+		box-shadow: var(--shadow-1);
 	}
 
 	:host([type='outlined'][dragged]) {
-		box-shadow: var(--schmancy-sys-elevation-3);
+		box-shadow: var(--shadow-3);
 	}
 
 	/* Disabled state */
@@ -104,74 +92,37 @@ let n = class extends v(b`
 		opacity: 0.38;
 	}
 
-	/* State layer overlay */
-	.state-layer {
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		background-color: var(--schmancy-sys-color-surface-on);
-		opacity: 0;
-		pointer-events: none;
-		transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
-	}
-
 	/* Focus ring */
 	:host([interactive]:focus-visible:not([disabled])) {
-		outline: 2px solid var(--schmancy-sys-color-primary);
+		outline: 2px solid var(--schmancy-sys-color-primary-default);
 		outline-offset: 2px;
 	}
 
-	/* Ripple effect container */
-	.ripple-container {
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		overflow: hidden;
-		pointer-events: none;
-	}
-
-	.ripple {
-		position: absolute;
-		border-radius: 50%;
-		transform: scale(0);
-		animation: ripple 600ms linear;
-		background-color: var(--schmancy-sys-color-surface-on);
-		opacity: 0.12;
-		pointer-events: none;
-	}
-
+	/* Ripple effect animation */
 	@keyframes ripple {
 		to {
 			transform: scale(4);
 			opacity: 0;
 		}
 	}
-
-	/* Content container */
-	.content {
-		position: relative;
-		height: 100%;
-		width: 100%;
-		border-radius: inherit;
-	}
 `) {
   constructor() {
-    super(...arguments), this.type = "elevated", this.interactive = !1, this.disabled = !1, this.dragged = !1, this.role = "article", this.ariaLabel = "", this.pressed = !1, this.ripples = [], this.nextRippleId = 0, this.handleClick = (t) => {
+    super(...arguments), this.type = "elevated", this.interactive = !1, this.disabled = !1, this.dragged = !1, this.role = "article", this.ariaLabel = "", this.pressed = !1, this.ripples = [], this.nextRippleId = 0, this.handleClick = (e) => {
       if (this.disabled || !this.interactive) return;
-      const s = this.getBoundingClientRect(), r = t.clientX - s.left, i = t.clientY - s.top, o = this.nextRippleId++;
+      const s = this.getBoundingClientRect(), r = e.clientX - s.left, i = e.clientY - s.top, o = this.nextRippleId++;
       this.ripples = [...this.ripples, { x: r, y: i, id: o }], setTimeout(() => {
-        this.ripples = this.ripples.filter((e) => e.id !== o);
+        this.ripples = this.ripples.filter((t) => t.id !== o);
       }, 600), this.href && (this.target === "_blank" ? window.open(this.href, "_blank") : window.location.href = this.href), this.dispatchEvent(new CustomEvent("schmancy-click", { detail: { value: this.type }, bubbles: !0, composed: !0 }));
-    }, this.handleKeyDown = (t) => {
-      if (!this.disabled && this.interactive && (t.key === "Enter" || t.key === " ")) {
-        t.preventDefault(), this.pressed = !0, this.setAttribute("pressed", "");
+    }, this.handleKeyDown = (e) => {
+      if (!this.disabled && this.interactive && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault(), this.pressed = !0, this.setAttribute("pressed", "");
         const s = this.getBoundingClientRect(), r = s.width / 2, i = s.height / 2, o = this.nextRippleId++;
         this.ripples = [...this.ripples, { x: r, y: i, id: o }], setTimeout(() => {
-          this.ripples = this.ripples.filter((e) => e.id !== o);
+          this.ripples = this.ripples.filter((t) => t.id !== o);
         }, 600), this.href && (this.target === "_blank" ? window.open(this.href, "_blank") : window.location.href = this.href), this.dispatchEvent(new CustomEvent("schmancy-click", { detail: { value: this.type }, bubbles: !0, composed: !0 }));
       }
-    }, this.handleKeyUp = (t) => {
-      t.key !== "Enter" && t.key !== " " || (this.pressed = !1, this.removeAttribute("pressed"));
+    }, this.handleKeyUp = (e) => {
+      e.key !== "Enter" && e.key !== " " || (this.pressed = !1, this.removeAttribute("pressed"));
     }, this.handleMouseDown = () => {
       !this.disabled && this.interactive && (this.pressed = !0, this.setAttribute("pressed", ""));
     }, this.handleMouseUp = () => {
@@ -183,14 +134,17 @@ let n = class extends v(b`
   connectedCallback() {
     super.connectedCallback(), this.interactive && !this.disabled && (this.setAttribute("tabindex", "0"), this.role && this.role !== "article" || (this.role = this.href ? "link" : "button"));
   }
-  updated(t) {
-    super.updated(t), (t.has("interactive") || t.has("disabled")) && (this.interactive && !this.disabled ? (this.setAttribute("tabindex", "0"), this.role && this.role !== "article" || (this.role = this.href ? "link" : "button")) : (this.removeAttribute("tabindex"), this.role !== "button" && this.role !== "link" || (this.role = "article")));
+  updated(e) {
+    super.updated(e), (e.has("interactive") || e.has("disabled")) && (this.interactive && !this.disabled ? (this.setAttribute("tabindex", "0"), this.role && this.role !== "article" || (this.role = this.href ? "link" : "button")) : (this.removeAttribute("tabindex"), this.role !== "button" && this.role !== "link" || (this.role = "article")));
+  }
+  getStateLayerOpacity() {
+    return !this.interactive || this.disabled ? "opacity-0" : this.pressed ? "opacity-[0.1]" : "opacity-0 hover:opacity-[0.08] focus-visible:opacity-[0.1]";
   }
   render() {
-    const t = g({ "card-container": !0, interactive: this.interactive && !this.disabled });
+    const e = v({ "relative w-full h-full rounded-xl": !0, "cursor-pointer": this.interactive && !this.disabled }), s = v({ "absolute inset-0 rounded-xl pointer-events-none transition-opacity duration-200 bg-surface-on": !0, [this.getStateLayerOpacity()]: !0 });
     return h`
 			<div
-				class=${t}
+				class=${e}
 				@click=${this.handleClick}
 				@keydown=${this.handleKeyDown}
 				@keyup=${this.handleKeyUp}
@@ -201,17 +155,17 @@ let n = class extends v(b`
 				aria-disabled=${this.disabled ? "true" : "false"}
 			>
 				<!-- State layer for hover/focus/pressed states -->
-				<div class="state-layer"></div>
+				<div class=${s}></div>
 
 				<!-- Ripple container for click effects -->
 				${this.interactive ? h`
-							<div class="ripple-container">
-								${this.ripples.map((s) => h`
+							<div class="absolute inset-0 rounded-xl overflow-hidden pointer-events-none">
+								${this.ripples.map((r) => h`
 										<span
-											class="ripple"
+											class="absolute rounded-full scale-0 animate-[ripple_600ms_linear] bg-surface-on opacity-[0.12] pointer-events-none"
 											style="
-												left: ${s.x}px;
-												top: ${s.y}px;
+												left: ${r.x}px;
+												top: ${r.y}px;
 												width: 20px;
 												height: 20px;
 												margin-left: -10px;
@@ -223,16 +177,16 @@ let n = class extends v(b`
 						` : ""}
 
 				<!-- Card content -->
-				<div class="content">
+				<div class="relative h-full w-full rounded-xl">
 					<slot></slot>
 				</div>
 			</div>
 		`;
   }
 };
-n.shadowRootOptions = { ...w.shadowRootOptions, mode: "open", delegatesFocus: !0 }, l([c({ reflect: !0 })], n.prototype, "type", 2), l([c({ type: Boolean, reflect: !0 })], n.prototype, "interactive", 2), l([c({ type: Boolean, reflect: !0 })], n.prototype, "disabled", 2), l([c({ type: Boolean, reflect: !0 })], n.prototype, "dragged", 2), l([c()], n.prototype, "href", 2), l([c()], n.prototype, "target", 2), l([c({ attribute: "role" })], n.prototype, "role", 2), l([c({ attribute: "aria-label" })], n.prototype, "ariaLabel", 2), l([u()], n.prototype, "pressed", 2), l([u()], n.prototype, "ripples", 2), n = l([y("schmancy-card")], n);
-var O = Object.getOwnPropertyDescriptor;
-let m = class extends v(b`
+l.shadowRootOptions = { ...w.shadowRootOptions, mode: "open", delegatesFocus: !0 }, n([d({ reflect: !0 })], l.prototype, "type", 2), n([d({ type: Boolean, reflect: !0 })], l.prototype, "interactive", 2), n([d({ type: Boolean, reflect: !0 })], l.prototype, "disabled", 2), n([d({ type: Boolean, reflect: !0 })], l.prototype, "dragged", 2), n([d()], l.prototype, "href", 2), n([d()], l.prototype, "target", 2), n([d({ attribute: "role" })], l.prototype, "role", 2), n([d({ attribute: "aria-label" })], l.prototype, "ariaLabel", 2), n([y()], l.prototype, "pressed", 2), n([y()], l.prototype, "ripples", 2), l = n([u("schmancy-card")], l);
+var j = Object.getOwnPropertyDescriptor;
+let g = class extends f(b`
 	:host {
 		display: block;
 		padding: 1rem;
@@ -242,15 +196,15 @@ let m = class extends v(b`
     return h`<slot></slot>`;
   }
 };
-m = ((t, s, r, i) => {
-  for (var o, e = i > 1 ? void 0 : i ? O(s, r) : s, a = t.length - 1; a >= 0; a--) (o = t[a]) && (e = o(e) || e);
-  return e;
-})([y("schmancy-card-content")], m);
-var D = Object.defineProperty, C = Object.getOwnPropertyDescriptor, p = (t, s, r, i) => {
-  for (var o, e = i > 1 ? void 0 : i ? C(s, r) : s, a = t.length - 1; a >= 0; a--) (o = t[a]) && (e = (i ? o(s, r, e) : o(e)) || e);
-  return i && e && D(s, r, e), e;
+g = ((e, s, r, i) => {
+  for (var o, t = i > 1 ? void 0 : i ? j(s, r) : s, a = e.length - 1; a >= 0; a--) (o = e[a]) && (t = o(t) || t);
+  return t;
+})([u("schmancy-card-content")], g);
+var D = Object.defineProperty, A = Object.getOwnPropertyDescriptor, p = (e, s, r, i) => {
+  for (var o, t = i > 1 ? void 0 : i ? A(s, r) : s, a = e.length - 1; a >= 0; a--) (o = e[a]) && (t = (i ? o(s, r, t) : o(t)) || t);
+  return i && t && D(s, r, t), t;
 };
-let d = class extends v(b`
+let c = class extends f(b`
 	:host {
 		display: block;
 		position: relative;
@@ -303,5 +257,5 @@ let d = class extends v(b`
     return this.src ? h`<img src="${this.src}" alt="${this.alt}" />` : h`<slot></slot>`;
   }
 };
-p([c({ type: String, reflect: !0 })], d.prototype, "src", 2), p([c({ type: String, reflect: !0 })], d.prototype, "fit", 2), p([c({ type: String })], d.prototype, "alt", 2), d = p([y("schmancy-card-media")], d);
-//# sourceMappingURL=media-nVQjNoX7.js.map
+p([d({ type: String, reflect: !0 })], c.prototype, "src", 2), p([d({ type: String, reflect: !0 })], c.prototype, "fit", 2), p([d({ type: String })], c.prototype, "alt", 2), c = p([u("schmancy-card-media")], c);
+//# sourceMappingURL=media-DruoNHFP.js.map

package/dist/media-DruoNHFP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-DruoNHFP.js","sources":["../src/card/actions.ts","../src/card/card.ts","../src/card/content.ts","../src/card/media.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\n/**\n * @element schmancy-card-action\n * @slot - The content of the action\n */\n@customElement('schmancy-card-action')\nexport default class SchmancyCardAction extends TailwindElement(css`\n\t:host {\n\t\tdisplay: flex;\n\t\tgap: 0.5rem;\n\t\tpadding: 0.5rem 1rem;\n\t\talign-items: center;\n\t\tjustify-content: flex-end;\n\t}\n`) {\n\tprotected render(): unknown {\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-card-action': SchmancyCardAction\n\t}\n}\n","import { TailwindElement } from '@mixins/index'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\n@customElement('schmancy-card')\nexport default class SchmancyCard extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tborder-radius: 12px; /* M3 spec: 12px for cards */\n\t\ttransition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);\n\t\toutline: none;\n\t}\n\n\t/* Type-specific base styles */\n\t:host([type='elevated']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-low);\n\t\tbox-shadow: var(--shadow-1);\n\t}\n\n\t:host([type='filled']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-highest);\n\t\tbox-shadow: var(--shadow-0);\n\t}\n\n\t:host([type='outlined']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-default);\n\t\tborder: 1px solid var(--schmancy-sys-color-outlineVariant);\n\t\tbox-shadow: var(--shadow-0);\n\t}\n\n\t/* Interactive state */\n\t:host([interactive]) {\n\t\tcursor: pointer;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\n\t/* Elevated interactive states */\n\t:host([type='elevated'][interactive]:hover:not([disabled])) {\n\t\tbox-shadow: var(--shadow-2);\n\t}\n\n\t:host([type='elevated'][dragged]) {\n\t\tbox-shadow: var(--shadow-3);\n\t}\n\n\t/* Filled interactive states */\n\t:host([type='filled'][interactive]:hover:not([disabled])) {\n\t\tbox-shadow: var(--shadow-1);\n\t}\n\n\t:host([type='filled'][dragged]) {\n\t\tbox-shadow: var(--shadow-3);\n\t}\n\n\t/* Outlined interactive states */\n\t:host([type='outlined'][interactive]:hover:not([disabled])) {\n\t\tbox-shadow: var(--shadow-1);\n\t}\n\n\t:host([type='outlined'][dragged]) {\n\t\tbox-shadow: var(--shadow-3);\n\t}\n\n\t/* Disabled state */\n\t:host([disabled]) {\n\t\tpointer-events: none;\n\t\topacity: 0.38;\n\t}\n\n\t/* Focus ring */\n\t:host([interactive]:focus-visible:not([disabled])) {\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default);\n\t\toutline-offset: 2px;\n\t}\n\n\t/* Ripple effect animation */\n\t@keyframes ripple {\n\t\tto {\n\t\t\ttransform: scale(4);\n\t\t\topacity: 0;\n\t\t}\n\t}\n`) {\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tmode: 'open',\n\t\tdelegatesFocus: true,\n\t}\n\n\t/**\n\t * The visual style of the card.\n\t * @default 'elevated'\n\t */\n\t@property({ reflect: true })\n\ttype: 'elevated' | 'filled' | 'outlined' = 'elevated'\n\n\t/**\n\t * Makes the card interactive (clickable).\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tinteractive = false\n\n\t/**\n\t * Disables the card.\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false\n\n\t/**\n\t * Indicates the card is being dragged.\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tdragged = false\n\n\t/**\n\t * URL to navigate to when card is clicked (makes it act like a link).\n\t */\n\t@property()\n\thref?: string\n\n\t/**\n\t * Target for the link navigation.\n\t */\n\t@property()\n\ttarget?: string\n\n\t/**\n\t * ARIA role for accessibility.\n\t */\n\t@property({ attribute: 'role' })\n\toverride role = 'article'\n\n\t/**\n\t * ARIA label for accessibility.\n\t */\n\t@property({ attribute: 'aria-label' })\n\toverride ariaLabel: string = ''\n\n\t// Internal state for interaction feedback\n\t@state() pressed = false\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\n\tprivate nextRippleId = 0\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Set appropriate ARIA attributes for interactive cards\n\t\tif (this.interactive && !this.disabled) {\n\t\t\tthis.setAttribute('tabindex', '0')\n\t\t\tif (!this.role || this.role === 'article') {\n\t\t\t\tthis.role = this.href ? 'link' : 'button'\n\t\t\t}\n\t\t}\n\t}\n\n\tupdated(changedProperties: Map<string, any>) {\n\t\tsuper.updated(changedProperties)\n\n\t\t// Update ARIA attributes when interactive or disabled state changes\n\t\tif (changedProperties.has('interactive') || changedProperties.has('disabled')) {\n\t\t\tif (this.interactive && !this.disabled) {\n\t\t\t\tthis.setAttribute('tabindex', '0')\n\t\t\t\tif (!this.role || this.role === 'article') {\n\t\t\t\t\tthis.role = this.href ? 'link' : 'button'\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute('tabindex')\n\t\t\t\tif (this.role === 'button' || this.role === 'link') {\n\t\t\t\t\tthis.role = 'article'\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate handleClick = (e: MouseEvent) => {\n\t\tif (this.disabled || !this.interactive) return\n\n\t\t// Add ripple effect at click position\n\t\tconst rect = this.getBoundingClientRect()\n\t\tconst x = e.clientX - rect.left\n\t\tconst y = e.clientY - rect.top\n\t\tconst id = this.nextRippleId++\n\n\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t// Remove ripple after animation completes\n\t\tsetTimeout(() => {\n\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t}, 600)\n\n\t\t// Navigate if href is provided\n\t\tif (this.href) {\n\t\t\tif (this.target === '_blank') {\n\t\t\t\twindow.open(this.href, '_blank')\n\t\t\t} else {\n\t\t\t\twindow.location.href = this.href\n\t\t\t}\n\t\t}\n\n\t\t// Dispatch click event for parent components to handle\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('schmancy-click', {\n\t\t\t\tdetail: { value: this.type },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled || !this.interactive) return\n\n\t\t// Activate on Enter or Space for keyboard navigation\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tthis.pressed = true\n\t\t\tthis.setAttribute('pressed', '')\n\n\t\t\t// Simulate click\n\t\t\tconst rect = this.getBoundingClientRect()\n\t\t\tconst x = rect.width / 2\n\t\t\tconst y = rect.height / 2\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\n\t\t\tif (this.href) {\n\t\t\t\tif (this.target === '_blank') {\n\t\t\t\t\twindow.open(this.href, '_blank')\n\t\t\t\t} else {\n\t\t\t\t\twindow.location.href = this.href\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('schmancy-click', {\n\t\t\t\t\tdetail: { value: this.type },\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\t}\n\n\tprivate handleKeyUp = (e: KeyboardEvent) => {\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\tthis.pressed = false\n\t\t\tthis.removeAttribute('pressed')\n\t\t}\n\t}\n\n\tprivate handleMouseDown = () => {\n\t\tif (this.disabled || !this.interactive) return\n\t\tthis.pressed = true\n\t\tthis.setAttribute('pressed', '')\n\t}\n\n\tprivate handleMouseUp = () => {\n\t\tthis.pressed = false\n\t\tthis.removeAttribute('pressed')\n\t}\n\n\tprivate handleMouseLeave = () => {\n\t\tthis.pressed = false\n\t\tthis.removeAttribute('pressed')\n\t}\n\n\t// Get the classes for state layer based on current state\n\tprivate getStateLayerOpacity(): string {\n\t\tif (!this.interactive || this.disabled) return 'opacity-0'\n\t\tif (this.pressed) return 'opacity-[0.1]' // M3 pressed: 0.1\n\t\treturn 'opacity-0 hover:opacity-[0.08] focus-visible:opacity-[0.1]' // M3 hover: 0.08, focus: 0.1\n\t}\n\n\tprotected render() {\n\t\tconst containerClasses = classMap({\n\t\t\t'relative w-full h-full rounded-xl': true,\n\t\t\t'cursor-pointer': this.interactive && !this.disabled,\n\t\t})\n\n\t\tconst stateLayerClasses = classMap({\n\t\t\t'absolute inset-0 rounded-xl pointer-events-none transition-opacity duration-200 bg-surface-on': true,\n\t\t\t[this.getStateLayerOpacity()]: true,\n\t\t})\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${containerClasses}\n\t\t\t\t@click=${this.handleClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@keyup=${this.handleKeyUp}\n\t\t\t\t@mousedown=${this.handleMouseDown}\n\t\t\t\t@mouseup=${this.handleMouseUp}\n\t\t\t\t@mouseleave=${this.handleMouseLeave}\n\t\t\t\taria-label=${ifDefined(this.ariaLabel)}\n\t\t\t\taria-disabled=${this.disabled ? 'true' : 'false'}\n\t\t\t>\n\t\t\t\t<!-- State layer for hover/focus/pressed states -->\n\t\t\t\t<div class=${stateLayerClasses}></div>\n\n\t\t\t\t<!-- Ripple container for click effects -->\n\t\t\t\t${this.interactive\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<div class=\"absolute inset-0 rounded-xl overflow-hidden pointer-events-none\">\n\t\t\t\t\t\t\t\t${this.ripples.map(\n\t\t\t\t\t\t\t\t\tripple => html`\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"absolute rounded-full scale-0 animate-[ripple_600ms_linear] bg-surface-on opacity-[0.12] pointer-events-none\"\n\t\t\t\t\t\t\t\t\t\t\tstyle=\"\n\t\t\t\t\t\t\t\t\t\t\t\tleft: ${ripple.x}px;\n\t\t\t\t\t\t\t\t\t\t\t\ttop: ${ripple.y}px;\n\t\t\t\t\t\t\t\t\t\t\t\twidth: 20px;\n\t\t\t\t\t\t\t\t\t\t\t\theight: 20px;\n\t\t\t\t\t\t\t\t\t\t\t\tmargin-left: -10px;\n\t\t\t\t\t\t\t\t\t\t\t\tmargin-top: -10px;\n\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`\n\t\t\t\t\t: ''}\n\n\t\t\t\t<!-- Card content -->\n\t\t\t\t<div class=\"relative h-full w-full rounded-xl\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-card': SchmancyCard\n\t}\n}\n","import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\n/**\n * @element schmancy-card-content\n */\n@customElement('schmancy-card-content')\nexport default class SchmancyCardContent extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tpadding: 1rem;\n\t}\n`) {\n\tprotected render(): unknown {\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-card-content': SchmancyCardContent\n\t}\n}\n","import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n * @element schmancy-card-media\n */\n@customElement('schmancy-card-media')\nexport default class SchmancyCardMedia extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\theight: 200px;\n\t\toverflow: hidden;\n\t}\n\t\n\t/* Allow height to be overridden when used in flex/grid layouts */\n\t:host-context(.h-full) {\n\t\theight: 100%;\n\t}\n\t\n\t::slotted(img),\n\timg {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-position: center;\n\t}\n\t\n\t/* Object fit styles based on fit attribute */\n\t:host([fit=\"contain\"]) img,\n\t:host([fit=\"contain\"]) ::slotted(img) {\n\t\tobject-fit: contain;\n\t}\n\t\n\t:host([fit=\"cover\"]) img,\n\t:host([fit=\"cover\"]) ::slotted(img) {\n\t\tobject-fit: cover;\n\t}\n\t\n\t:host([fit=\"fill\"]) img,\n\t:host([fit=\"fill\"]) ::slotted(img) {\n\t\tobject-fit: fill;\n\t}\n\t\n\t:host([fit=\"none\"]) img,\n\t:host([fit=\"none\"]) ::slotted(img) {\n\t\tobject-fit: none;\n\t}\n\t\n\t:host([fit=\"scale-down\"]) img,\n\t:host([fit=\"scale-down\"]) ::slotted(img) {\n\t\tobject-fit: scale-down;\n\t}\n`) {\n\t@property({ type: String, reflect: true })\n\tsrc: string = ''\n\n\t@property({ type: String, reflect: true })\n\tfit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' = 'contain'\n\t\n\t@property({ type: String })\n\talt: string = ''\n\n\tprotected render(): unknown {\n\t\t// If src is provided, render an img element\n\t\t// Otherwise, allow users to slot their own content\n\t\treturn this.src \n\t\t\t? html`<img src=\"${this.src}\" alt=\"${this.alt}\" />` \n\t\t\t: html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-card-media': SchmancyCardMedia\n\t}\n}\n"],"names":["SchmancyCardAction","TailwindElement","css","render","html","customElement","SchmancyCard","super","arguments","this","type","interactive","disabled","dragged","role","ariaLabel","pressed","ripples","nextRippleId","handleClick","e","rect","getBoundingClientRect","x","clientX","left","y","clientY","top","id","setTimeout","filter","r","href","target","window","open","location","dispatchEvent","CustomEvent","detail","value","bubbles","composed","handleKeyDown","key","preventDefault","setAttribute","width","height","handleKeyUp","removeAttribute","handleMouseDown","handleMouseUp","handleMouseLeave","connectedCallback","changedProperties","updated","has","containerClasses","classMap","stateLayerClasses","getStateLayerOpacity","ifDefined","map","ripple","shadowRootOptions","LitElement","mode","delegatesFocus","__decorateClass","property","reflect","prototype","Boolean","attribute","state","SchmancyCardContent","SchmancyCardMedia","constructor","src","fit","alt","String"],"mappings":";;;;;;;;AASA,IAAqBA,IAArB,cAAgDC,EAAgBC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;EASrD,SAAAC;AACT,WAAOC;AAAAA,EACR;;AAXoBJ;;;GAArB,CADCK,EAAc,sBAAA,CAAA,GACML;;;;;ACFrB,IAAqBM,IAArB,cAA0CL,EAAgBC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAA1D,EAAA;AAAA,EAAA;AAAAK,UAAAA,GAAAC,SAAAA,GA0FCC,KAAAC,OAA2C,YAO3CD,KAAAE,cAAAA,IAOAF,KAAAG,WAAAA,IAOAH,KAAAI,UAAAA,IAkBAJ,KAASK,OAAO,WAMhBL,KAASM,YAAoB,IAGpBN,KAAAO,cACAP,KAAQQ,UAAuD,CAAA,GAExER,KAAQS,eAAe,GAiCvBT,KAAQU,cAAeC,CAAAA,MAAAA;AACtB,UAAIX,KAAKG,YAAAA,CAAaH,KAAKE,YAAa;AAGxC,YAAMU,IAAOZ,KAAKa,sBAAAA,GACZC,IAAIH,EAAEI,UAAUH,EAAKI,MACrBC,IAAIN,EAAEO,UAAUN,EAAKO,KACrBC,IAAKpB,KAAKS;AAEhBT,WAAKQ,UAAU,IAAIR,KAAKQ,SAAS,EAAEM,GAAAA,GAAGG,GAAAA,GAAGG,IAAAA,EAAAA,CAAAA,GAGzCC,WAAW;AACVrB,aAAKQ,UAAUR,KAAKQ,QAAQc,OAAOC,OAAKA,EAAEH,OAAOA,CAAAA;AAAAA,MAAAA,GAC/C,GAAA,GAGCpB,KAAKwB,SACJxB,KAAKyB,WAAW,WACnBC,OAAOC,KAAK3B,KAAKwB,MAAM,QAAA,IAEvBE,OAAOE,SAASJ,OAAOxB,KAAKwB,OAK9BxB,KAAK6B,cACJ,IAAIC,YAAY,kBAAkB,EACjCC,QAAQ,EAAEC,OAAOhC,KAAKC,QACtBgC,SAAAA,IACAC,aAAU,CAAA,CAAA;AAAA,IAAA,GAKblC,KAAQmC,gBAAiBxB,CAAAA,MAAAA;AACxB,WAAIX,KAAKG,YAAaH,KAAKE,gBAGvBS,EAAEyB,QAAQ,WAAWzB,EAAEyB,QAAQ,MAAK;AACvCzB,QAAAA,EAAE0B,eAAAA,GACFrC,KAAKO,UAAAA,IACLP,KAAKsC,aAAa,WAAW,EAAA;AAG7B,cAAM1B,IAAOZ,KAAKa,sBAAAA,GACZC,IAAIF,EAAK2B,QAAQ,GACjBtB,IAAIL,EAAK4B,SAAS,GAClBpB,IAAKpB,KAAKS;AAEhBT,aAAKQ,UAAU,CAAA,GAAIR,KAAKQ,SAAS,EAAEM,GAAAA,GAAGG,GAAAA,GAAGG,UAEzCC,WAAW,MAAA;AACVrB,eAAKQ,UAAUR,KAAKQ,QAAQc,OAAOC,OAAKA,EAAEH,OAAOA,CAAAA;AAAAA,QAAAA,GAC/C,MAECpB,KAAKwB,SACJxB,KAAKyB,WAAW,WACnBC,OAAOC,KAAK3B,KAAKwB,MAAM,QAAA,IAEvBE,OAAOE,SAASJ,OAAOxB,KAAKwB,OAI9BxB,KAAK6B,cACJ,IAAIC,YAAY,kBAAkB,EACjCC,QAAQ,EAAEC,OAAOhC,KAAKC,KAAAA,GACtBgC,SAAAA,IACAC,UAAAA,GAAU,CAAA,CAAA;AAAA,MAGb;AAAA,IAAA,GAGDlC,KAAQyC,cAAe9B,CAAAA,MAAAA;AACR,MAAVA,EAAEyB,QAAQ,WAAWzB,EAAEyB,QAAQ,QAClCpC,KAAKO,UAAAA,IACLP,KAAK0C,gBAAgB,SAAA;AAAA,IAAA,GAIvB1C,KAAQ2C,kBAAkB,MAAA;AAAA,OACrB3C,KAAKG,YAAaH,KAAKE,gBAC3BF,KAAKO,cACLP,KAAKsC,aAAa,WAAW,EAAA;AAAA,IAAA,GAG9BtC,KAAQ4C,gBAAgB,MAAA;AACvB5C,WAAKO,UAAAA,IACLP,KAAK0C,gBAAgB;OAGtB1C,KAAQ6C,mBAAmB;AAC1B7C,WAAKO,UAAAA,IACLP,KAAK0C,gBAAgB,SAAA;AAAA,IAAA;AAAA,EACtB;AAAA,EA9HA,oBAAAI;AACChD,UAAMgD,qBAGF9C,KAAKE,eAAAA,CAAgBF,KAAKG,aAC7BH,KAAKsC,aAAa,YAAY,MACzBtC,KAAKK,QAAQL,KAAKK,SAAS,cAC/BL,KAAKK,OAAOL,KAAKwB,OAAO,SAAS;AAAA,EAGpC;AAAA,EAEA,QAAQuB,GAAAA;AACPjD,UAAMkD,QAAQD,CAAAA,IAGVA,EAAkBE,IAAI,aAAA,KAAkBF,EAAkBE,IAAI,UAAA,OAC7DjD,KAAKE,eAAAA,CAAgBF,KAAKG,YAC7BH,KAAKsC,aAAa,YAAY,GAAA,GACzBtC,KAAKK,QAAQL,KAAKK,SAAS,cAC/BL,KAAKK,OAAOL,KAAKwB,OAAO,SAAS,cAGlCxB,KAAK0C,gBAAgB,UAAA,GACjB1C,KAAKK,SAAS,YAAYL,KAAKK,SAAS,WAC3CL,KAAKK,OAAO;AAAA,EAIhB;AAAA,EAoGQ;AACP,WAAA,CAAKL,KAAKE,eAAeF,KAAKG,WAAiB,cAC3CH,KAAKO,UAAgB,kBAClB;AAAA,EACR;AAAA,EAEU,SAAAb;AACT,UAAMwD,IAAmBC,EAAS,EACjC,qCAAA,IACA,kBAAkBnD,KAAKE,gBAAgBF,KAAKG,SAAAA,CAAAA,GAGvCiD,IAAoBD,EAAS,EAClC,qGACA,CAACnD,KAAKqD,qBAAAA,CAAAA,GAAAA,GAAyB,CAAA;AAGhC,WAAO1D;AAAAA;AAAAA,YAEGuD,CAAAA;AAAAA,aACClD,KAAKU,WAAAA;AAAAA,eACHV,KAAKmC,aAAAA;AAAAA,aACPnC,KAAKyC,WAAAA;AAAAA,iBACDzC,KAAK2C,eAAAA;AAAAA,eACP3C,KAAK4C,aAAAA;AAAAA,kBACF5C,KAAK6C,gBAAAA;AAAAA,iBACNS,EAAUtD,KAAKM,SAAAA,CAAAA;AAAAA,oBACZN,KAAKG,WAAW,SAAS,OAAA;AAAA;AAAA;AAAA,iBAG5BiD,CAAAA;AAAAA;AAAAA;AAAAA,MAGXpD,KAAKE,cACJP;AAAAA;AAAAA,UAEGK,KAAKQ,QAAQ+C,IACdC,CAAAA,MAAU7D;AAAAA;AAAAA;AAAAA;AAAAA,oBAIC6D,EAAO1C,CAAAA;AAAAA,mBACR0C,EAAOvC,CAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;;UAWnB,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQN;AAAA;AA7UoBpB,EA+EH4D,oBAAoB,EAAA,GACjCC,EAAWD,mBACdE,MAAM,QACNC,gBAAAA,GAAgB,GAQjBC,EAAA,CADCC,EAAS,EAAEC,YAAS,CAAA,CAAA,GAzFDlE,EA0FpBmE,WAAA,QAAA,CAAA,GAOAH,EAAA,CADCC,EAAS,EAAE7D,MAAMgE,SAASF,SAAAA,GAAS,CAAA,CAAA,GAhGhBlE,EAiGpBmE,WAAA,eAAA,CAAA,GAOAH,EAAA,CADCC,EAAS,EAAE7D,MAAMgE,SAASF,SAAAA,GAAS,CAAA,CAAA,GAvGhBlE,EAwGpBmE,WAAA,YAAA,CAAA,GAOAH,EAAA,CADCC,EAAS,EAAE7D,MAAMgE,SAASF,SAAAA,GAAS,CAAA,CAAA,GA9GhBlE,EA+GpBmE,WAAA,WAAA,CAAA,GAMAH,EAAA,CADCC,EAAAA,CAAAA,GApHmBjE,EAqHpBmE,WAAA,QAAA,CAAA,GAMAH,EAAA,CADCC,EAAAA,CAAAA,GA1HmBjE,EA2HpBmE,WAAA,UAAA,CAAA,GAMSH,EAAA,CADRC,EAAS,EAAEI,WAAW,OAAA,CAAA,CAAA,GAhIHrE,EAiIXmE,WAAA,QAAA,CAAA,GAMAH,EAAA,CADRC,EAAS,EAAEI,WAAW,aAAA,CAAA,CAAA,GAtIHrE,EAuIXmE,WAAA,aAAA,IAGAH,EAAA,CAARM,EAAAA,CAAAA,GA1ImBtE,EA0IXmE,WAAA,WAAA,CAAA,GACQH,EAAA,CAAhBM,EAAAA,CAAAA,GA3ImBtE,EA2IHmE,WAAA,WAAA,CAAA,GA3IGnE,IAArBgE,EAAA,CADCjE,EAAc,eAAA,CAAA,GACMC,CAAAA;;ACCrB,IAAqBuE,IAArB,cAAiD5E,EAAgBC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;EAMtD,SAAAC;AACT,WAAOC;AAAAA,EACR;;AARoByE;;;GAArB,CADCxE,EAAc,uBAAA,CAAA,GACMwE;;;;;ACArB,IAAqBC,IAArB,cAA+C7E,EAAgBC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAA/D,EAAA;AAAA,EAAA,cAAA6E;AAAAxE,UAAAA,GAAAC,SAAAA,GA+CCC,KAAAuE,MAAc,IAGdvE,KAAAwE,MAA4D,WAG5DxE,KAAAyE,MAAc;AAAA,EAAA;AAAA,EAEJ,SAAA/E;AAGT,WAAOM,KAAKuE,MACT5E,cAAiBK,KAAKuE,GAAAA,UAAavE,KAAKyE,GAAAA,SACxC9E;AAAAA,EACJ;AAAA;AAdAkE,EAAA,CADCC,EAAS,EAAE7D,MAAMyE,QAAQX,SAAAA,GAAS,CAAA,CAAA,GA9CfM,EA+CpBL,WAAA,OAAA,CAAA,GAGAH,EAAA,CADCC,EAAS,EAAE7D,MAAMyE,QAAQX,SAAAA,QAjDNM,EAkDpBL,WAAA,OAAA,CAAA,GAGAH,EAAA,CADCC,EAAS,EAAE7D,MAAMyE,OAAAA,CAAAA,CAAAA,GApDEL,EAqDpBL,WAAA,OAAA,CAAA,GArDoBK,IAArBR,EAAA,CADCjE,EAAc,qBAAA,CAAA,GACMyE,CAAAA;"}

package/dist/{media-CL9LNHic.cjs → media-bbZayaf9.cjs}

@@ -1,4 +1,4 @@
-"use strict";require("rxjs");const b=require("lit/directives/class-map.js");require("lit/directives/style-map.js");const r=require("lit/decorators.js"),y=require("./tailwind.mixin-O9jmUJ7m.cjs"),c=require("lit"),f=require("lit/directives/if-defined.js");var m=Object.getOwnPropertyDescriptor;let v=class extends y.TailwindElement(c.css`
+"use strict";require("rxjs");const y=require("lit/directives/class-map.js");require("lit/directives/style-map.js");const a=require("lit/decorators.js"),u=require("./tailwind.mixin-DE8PuauZ.cjs"),h=require("lit"),f=require("lit/directives/if-defined.js");var m=Object.getOwnPropertyDescriptor;let b=class extends u.TailwindElement(h.css`
 	:host {
 		display: flex;
 		gap: 0.5rem;
@@ -6,75 +6,63 @@
 		align-items: center;
 		justify-content: flex-end;
 	}
-`){render(){return c.html`<slot></slot>`}};v=((t,s,a,i)=>{for(var o,e=i>1?void 0:i?m(s,a):s,n=t.length-1;n>=0;n--)(o=t[n])&&(e=o(e)||e);return e})([r.customElement("schmancy-card-action")],v);var g=Object.defineProperty,w=Object.getOwnPropertyDescriptor,h=(t,s,a,i)=>{for(var o,e=i>1?void 0:i?w(s,a):s,n=t.length-1;n>=0;n--)(o=t[n])&&(e=(i?o(s,a,e):o(e))||e);return i&&e&&g(s,a,e),e};let l=class extends y.TailwindElement(c.css`
+`){render(){return h.html`<slot></slot>`}};b=((t,s,r,i)=>{for(var o,e=i>1?void 0:i?m(s,r):s,l=t.length-1;l>=0;l--)(o=t[l])&&(e=o(e)||e);return e})([a.customElement("schmancy-card-action")],b);var g=Object.defineProperty,w=Object.getOwnPropertyDescriptor,d=(t,s,r,i)=>{for(var o,e=i>1?void 0:i?w(s,r):s,l=t.length-1;l>=0;l--)(o=t[l])&&(e=(i?o(s,r,e):o(e))||e);return i&&e&&g(s,r,e),e};let n=class extends u.TailwindElement(h.css`
 	:host {
 		display: block;
 		position: relative;
 		border-radius: 12px; /* M3 spec: 12px for cards */
-		transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+		transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
 		outline: none;
 	}
 
 	/* Type-specific base styles */
 	:host([type='elevated']) {
 		background-color: var(--schmancy-sys-color-surface-low);
-		box-shadow: var(--schmancy-sys-elevation-1);
+		box-shadow: var(--shadow-1);
 	}
 
 	:host([type='filled']) {
 		background-color: var(--schmancy-sys-color-surface-highest);
-		box-shadow: var(--schmancy-sys-elevation-0);
+		box-shadow: var(--shadow-0);
 	}
 
 	:host([type='outlined']) {
 		background-color: var(--schmancy-sys-color-surface-default);
-		border: 1px solid var(--schmancy-sys-color-outline-variant);
-		box-shadow: var(--schmancy-sys-elevation-0);
+		border: 1px solid var(--schmancy-sys-color-outlineVariant);
+		box-shadow: var(--shadow-0);
 	}
 
-	/* Interactive state layers */
+	/* Interactive state */
 	:host([interactive]) {
 		cursor: pointer;
 		-webkit-tap-highlight-color: transparent;
 	}
 
-	:host([interactive]:hover:not([disabled])) .state-layer {
-		opacity: 0.08;
-	}
-
-	:host([interactive]:focus-visible:not([disabled])) .state-layer {
-		opacity: 0.12;
-	}
-
-	:host([interactive][pressed]:not([disabled])) .state-layer {
-		opacity: 0.12;
-	}
-
 	/* Elevated interactive states */
 	:host([type='elevated'][interactive]:hover:not([disabled])) {
-		box-shadow: var(--schmancy-sys-elevation-2);
+		box-shadow: var(--shadow-2);
 	}
 
 	:host([type='elevated'][dragged]) {
-		box-shadow: var(--schmancy-sys-elevation-3);
+		box-shadow: var(--shadow-3);
 	}
 
 	/* Filled interactive states */
 	:host([type='filled'][interactive]:hover:not([disabled])) {
-		box-shadow: var(--schmancy-sys-elevation-1);
+		box-shadow: var(--shadow-1);
 	}
 
 	:host([type='filled'][dragged]) {
-		box-shadow: var(--schmancy-sys-elevation-3);
+		box-shadow: var(--shadow-3);
 	}
 
 	/* Outlined interactive states */
 	:host([type='outlined'][interactive]:hover:not([disabled])) {
-		box-shadow: var(--schmancy-sys-elevation-1);
+		box-shadow: var(--shadow-1);
 	}
 
 	:host([type='outlined'][dragged]) {
-		box-shadow: var(--schmancy-sys-elevation-3);
+		box-shadow: var(--shadow-3);
 	}
 
 	/* Disabled state */
@@ -83,57 +71,20 @@
 		opacity: 0.38;
 	}
 
-	/* State layer overlay */
-	.state-layer {
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		background-color: var(--schmancy-sys-color-surface-on);
-		opacity: 0;
-		pointer-events: none;
-		transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
-	}
-
 	/* Focus ring */
 	:host([interactive]:focus-visible:not([disabled])) {
-		outline: 2px solid var(--schmancy-sys-color-primary);
+		outline: 2px solid var(--schmancy-sys-color-primary-default);
 		outline-offset: 2px;
 	}
 
-	/* Ripple effect container */
-	.ripple-container {
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		overflow: hidden;
-		pointer-events: none;
-	}
-
-	.ripple {
-		position: absolute;
-		border-radius: 50%;
-		transform: scale(0);
-		animation: ripple 600ms linear;
-		background-color: var(--schmancy-sys-color-surface-on);
-		opacity: 0.12;
-		pointer-events: none;
-	}
-
+	/* Ripple effect animation */
 	@keyframes ripple {
 		to {
 			transform: scale(4);
 			opacity: 0;
 		}
 	}
-
-	/* Content container */
-	.content {
-		position: relative;
-		height: 100%;
-		width: 100%;
-		border-radius: inherit;
-	}
-`){constructor(){super(...arguments),this.type="elevated",this.interactive=!1,this.disabled=!1,this.dragged=!1,this.role="article",this.ariaLabel="",this.pressed=!1,this.ripples=[],this.nextRippleId=0,this.handleClick=t=>{if(this.disabled||!this.interactive)return;const s=this.getBoundingClientRect(),a=t.clientX-s.left,i=t.clientY-s.top,o=this.nextRippleId++;this.ripples=[...this.ripples,{x:a,y:i,id:o}],setTimeout(()=>{this.ripples=this.ripples.filter(e=>e.id!==o)},600),this.href&&(this.target==="_blank"?window.open(this.href,"_blank"):window.location.href=this.href),this.dispatchEvent(new CustomEvent("schmancy-click",{detail:{value:this.type},bubbles:!0,composed:!0}))},this.handleKeyDown=t=>{if(!this.disabled&&this.interactive&&(t.key==="Enter"||t.key===" ")){t.preventDefault(),this.pressed=!0,this.setAttribute("pressed","");const s=this.getBoundingClientRect(),a=s.width/2,i=s.height/2,o=this.nextRippleId++;this.ripples=[...this.ripples,{x:a,y:i,id:o}],setTimeout(()=>{this.ripples=this.ripples.filter(e=>e.id!==o)},600),this.href&&(this.target==="_blank"?window.open(this.href,"_blank"):window.location.href=this.href),this.dispatchEvent(new CustomEvent("schmancy-click",{detail:{value:this.type},bubbles:!0,composed:!0}))}},this.handleKeyUp=t=>{t.key!=="Enter"&&t.key!==" "||(this.pressed=!1,this.removeAttribute("pressed"))},this.handleMouseDown=()=>{!this.disabled&&this.interactive&&(this.pressed=!0,this.setAttribute("pressed",""))},this.handleMouseUp=()=>{this.pressed=!1,this.removeAttribute("pressed")},this.handleMouseLeave=()=>{this.pressed=!1,this.removeAttribute("pressed")}}connectedCallback(){super.connectedCallback(),this.interactive&&!this.disabled&&(this.setAttribute("tabindex","0"),this.role&&this.role!=="article"||(this.role=this.href?"link":"button"))}updated(t){super.updated(t),(t.has("interactive")||t.has("disabled"))&&(this.interactive&&!this.disabled?(this.setAttribute("tabindex","0"),this.role&&this.role!=="article"||(this.role=this.href?"link":"button")):(this.removeAttribute("tabindex"),this.role!=="button"&&this.role!=="link"||(this.role="article")))}render(){const t=b.classMap({"card-container":!0,interactive:this.interactive&&!this.disabled});return c.html`
+`){constructor(){super(...arguments),this.type="elevated",this.interactive=!1,this.disabled=!1,this.dragged=!1,this.role="article",this.ariaLabel="",this.pressed=!1,this.ripples=[],this.nextRippleId=0,this.handleClick=t=>{if(this.disabled||!this.interactive)return;const s=this.getBoundingClientRect(),r=t.clientX-s.left,i=t.clientY-s.top,o=this.nextRippleId++;this.ripples=[...this.ripples,{x:r,y:i,id:o}],setTimeout(()=>{this.ripples=this.ripples.filter(e=>e.id!==o)},600),this.href&&(this.target==="_blank"?window.open(this.href,"_blank"):window.location.href=this.href),this.dispatchEvent(new CustomEvent("schmancy-click",{detail:{value:this.type},bubbles:!0,composed:!0}))},this.handleKeyDown=t=>{if(!this.disabled&&this.interactive&&(t.key==="Enter"||t.key===" ")){t.preventDefault(),this.pressed=!0,this.setAttribute("pressed","");const s=this.getBoundingClientRect(),r=s.width/2,i=s.height/2,o=this.nextRippleId++;this.ripples=[...this.ripples,{x:r,y:i,id:o}],setTimeout(()=>{this.ripples=this.ripples.filter(e=>e.id!==o)},600),this.href&&(this.target==="_blank"?window.open(this.href,"_blank"):window.location.href=this.href),this.dispatchEvent(new CustomEvent("schmancy-click",{detail:{value:this.type},bubbles:!0,composed:!0}))}},this.handleKeyUp=t=>{t.key!=="Enter"&&t.key!==" "||(this.pressed=!1,this.removeAttribute("pressed"))},this.handleMouseDown=()=>{!this.disabled&&this.interactive&&(this.pressed=!0,this.setAttribute("pressed",""))},this.handleMouseUp=()=>{this.pressed=!1,this.removeAttribute("pressed")},this.handleMouseLeave=()=>{this.pressed=!1,this.removeAttribute("pressed")}}connectedCallback(){super.connectedCallback(),this.interactive&&!this.disabled&&(this.setAttribute("tabindex","0"),this.role&&this.role!=="article"||(this.role=this.href?"link":"button"))}updated(t){super.updated(t),(t.has("interactive")||t.has("disabled"))&&(this.interactive&&!this.disabled?(this.setAttribute("tabindex","0"),this.role&&this.role!=="article"||(this.role=this.href?"link":"button")):(this.removeAttribute("tabindex"),this.role!=="button"&&this.role!=="link"||(this.role="article")))}getStateLayerOpacity(){return!this.interactive||this.disabled?"opacity-0":this.pressed?"opacity-[0.1]":"opacity-0 hover:opacity-[0.08] focus-visible:opacity-[0.1]"}render(){const t=y.classMap({"relative w-full h-full rounded-xl":!0,"cursor-pointer":this.interactive&&!this.disabled}),s=y.classMap({"absolute inset-0 rounded-xl pointer-events-none transition-opacity duration-200 bg-surface-on":!0,[this.getStateLayerOpacity()]:!0});return h.html`
 			<div
 				class=${t}
 				@click=${this.handleClick}
@@ -146,17 +97,17 @@
 				aria-disabled=${this.disabled?"true":"false"}
 			>
 				<!-- State layer for hover/focus/pressed states -->
-				<div class="state-layer"></div>
+				<div class=${s}></div>
 
 				<!-- Ripple container for click effects -->
-				${this.interactive?c.html`
-							<div class="ripple-container">
-								${this.ripples.map(s=>c.html`
+				${this.interactive?h.html`
+							<div class="absolute inset-0 rounded-xl overflow-hidden pointer-events-none">
+								${this.ripples.map(r=>h.html`
 										<span
-											class="ripple"
+											class="absolute rounded-full scale-0 animate-[ripple_600ms_linear] bg-surface-on opacity-[0.12] pointer-events-none"
 											style="
-												left: ${s.x}px;
-												top: ${s.y}px;
+												left: ${r.x}px;
+												top: ${r.y}px;
 												width: 20px;
 												height: 20px;
 												margin-left: -10px;
@@ -168,16 +119,16 @@
 						`:""}
 
 				<!-- Card content -->
-				<div class="content">
+				<div class="relative h-full w-full rounded-xl">
 					<slot></slot>
 				</div>
 			</div>
-		`}};l.shadowRootOptions={...c.LitElement.shadowRootOptions,mode:"open",delegatesFocus:!0},h([r.property({reflect:!0})],l.prototype,"type",2),h([r.property({type:Boolean,reflect:!0})],l.prototype,"interactive",2),h([r.property({type:Boolean,reflect:!0})],l.prototype,"disabled",2),h([r.property({type:Boolean,reflect:!0})],l.prototype,"dragged",2),h([r.property()],l.prototype,"href",2),h([r.property()],l.prototype,"target",2),h([r.property({attribute:"role"})],l.prototype,"role",2),h([r.property({attribute:"aria-label"})],l.prototype,"ariaLabel",2),h([r.state()],l.prototype,"pressed",2),h([r.state()],l.prototype,"ripples",2),l=h([r.customElement("schmancy-card")],l);var x=Object.getOwnPropertyDescriptor;let u=class extends y.TailwindElement(c.css`
+		`}};n.shadowRootOptions={...h.LitElement.shadowRootOptions,mode:"open",delegatesFocus:!0},d([a.property({reflect:!0})],n.prototype,"type",2),d([a.property({type:Boolean,reflect:!0})],n.prototype,"interactive",2),d([a.property({type:Boolean,reflect:!0})],n.prototype,"disabled",2),d([a.property({type:Boolean,reflect:!0})],n.prototype,"dragged",2),d([a.property()],n.prototype,"href",2),d([a.property()],n.prototype,"target",2),d([a.property({attribute:"role"})],n.prototype,"role",2),d([a.property({attribute:"aria-label"})],n.prototype,"ariaLabel",2),d([a.state()],n.prototype,"pressed",2),d([a.state()],n.prototype,"ripples",2),n=d([a.customElement("schmancy-card")],n);var x=Object.getOwnPropertyDescriptor;let v=class extends u.TailwindElement(h.css`
 	:host {
 		display: block;
 		padding: 1rem;
 	}
-`){render(){return c.html`<slot></slot>`}};u=((t,s,a,i)=>{for(var o,e=i>1?void 0:i?x(s,a):s,n=t.length-1;n>=0;n--)(o=t[n])&&(e=o(e)||e);return e})([r.customElement("schmancy-card-content")],u);var k=Object.defineProperty,E=Object.getOwnPropertyDescriptor,p=(t,s,a,i)=>{for(var o,e=i>1?void 0:i?E(s,a):s,n=t.length-1;n>=0;n--)(o=t[n])&&(e=(i?o(s,a,e):o(e))||e);return i&&e&&k(s,a,e),e};let d=class extends y.TailwindElement(c.css`
+`){render(){return h.html`<slot></slot>`}};v=((t,s,r,i)=>{for(var o,e=i>1?void 0:i?x(s,r):s,l=t.length-1;l>=0;l--)(o=t[l])&&(e=o(e)||e);return e})([a.customElement("schmancy-card-content")],v);var k=Object.defineProperty,E=Object.getOwnPropertyDescriptor,c=(t,s,r,i)=>{for(var o,e=i>1?void 0:i?E(s,r):s,l=t.length-1;l>=0;l--)(o=t[l])&&(e=(i?o(s,r,e):o(e))||e);return i&&e&&k(s,r,e),e};let p=class extends u.TailwindElement(h.css`
 	:host {
 		display: block;
 		position: relative;
@@ -222,5 +173,5 @@
 	:host([fit="scale-down"]) ::slotted(img) {
 		object-fit: scale-down;
 	}
-`){constructor(){super(...arguments),this.src="",this.fit="contain",this.alt=""}render(){return this.src?c.html`<img src="${this.src}" alt="${this.alt}" />`:c.html`<slot></slot>`}};p([r.property({type:String,reflect:!0})],d.prototype,"src",2),p([r.property({type:String,reflect:!0})],d.prototype,"fit",2),p([r.property({type:String})],d.prototype,"alt",2),d=p([r.customElement("schmancy-card-media")],d);
-//# sourceMappingURL=media-CL9LNHic.cjs.map
+`){constructor(){super(...arguments),this.src="",this.fit="contain",this.alt=""}render(){return this.src?h.html`<img src="${this.src}" alt="${this.alt}" />`:h.html`<slot></slot>`}};c([a.property({type:String,reflect:!0})],p.prototype,"src",2),c([a.property({type:String,reflect:!0})],p.prototype,"fit",2),c([a.property({type:String})],p.prototype,"alt",2),p=c([a.customElement("schmancy-card-media")],p);
+//# sourceMappingURL=media-bbZayaf9.cjs.map

package/dist/media-bbZayaf9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-bbZayaf9.cjs","sources":["../src/card/actions.ts","../src/card/card.ts","../src/card/content.ts","../src/card/media.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\n/**\n * @element schmancy-card-action\n * @slot - The content of the action\n */\n@customElement('schmancy-card-action')\nexport default class SchmancyCardAction extends TailwindElement(css`\n\t:host {\n\t\tdisplay: flex;\n\t\tgap: 0.5rem;\n\t\tpadding: 0.5rem 1rem;\n\t\talign-items: center;\n\t\tjustify-content: flex-end;\n\t}\n`) {\n\tprotected render(): unknown {\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-card-action': SchmancyCardAction\n\t}\n}\n","import { TailwindElement } from '@mixins/index'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\n@customElement('schmancy-card')\nexport default class SchmancyCard extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tborder-radius: 12px; /* M3 spec: 12px for cards */\n\t\ttransition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);\n\t\toutline: none;\n\t}\n\n\t/* Type-specific base styles */\n\t:host([type='elevated']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-low);\n\t\tbox-shadow: var(--shadow-1);\n\t}\n\n\t:host([type='filled']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-highest);\n\t\tbox-shadow: var(--shadow-0);\n\t}\n\n\t:host([type='outlined']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-default);\n\t\tborder: 1px solid var(--schmancy-sys-color-outlineVariant);\n\t\tbox-shadow: var(--shadow-0);\n\t}\n\n\t/* Interactive state */\n\t:host([interactive]) {\n\t\tcursor: pointer;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\n\t/* Elevated interactive states */\n\t:host([type='elevated'][interactive]:hover:not([disabled])) {\n\t\tbox-shadow: var(--shadow-2);\n\t}\n\n\t:host([type='elevated'][dragged]) {\n\t\tbox-shadow: var(--shadow-3);\n\t}\n\n\t/* Filled interactive states */\n\t:host([type='filled'][interactive]:hover:not([disabled])) {\n\t\tbox-shadow: var(--shadow-1);\n\t}\n\n\t:host([type='filled'][dragged]) {\n\t\tbox-shadow: var(--shadow-3);\n\t}\n\n\t/* Outlined interactive states */\n\t:host([type='outlined'][interactive]:hover:not([disabled])) {\n\t\tbox-shadow: var(--shadow-1);\n\t}\n\n\t:host([type='outlined'][dragged]) {\n\t\tbox-shadow: var(--shadow-3);\n\t}\n\n\t/* Disabled state */\n\t:host([disabled]) {\n\t\tpointer-events: none;\n\t\topacity: 0.38;\n\t}\n\n\t/* Focus ring */\n\t:host([interactive]:focus-visible:not([disabled])) {\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default);\n\t\toutline-offset: 2px;\n\t}\n\n\t/* Ripple effect animation */\n\t@keyframes ripple {\n\t\tto {\n\t\t\ttransform: scale(4);\n\t\t\topacity: 0;\n\t\t}\n\t}\n`) {\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tmode: 'open',\n\t\tdelegatesFocus: true,\n\t}\n\n\t/**\n\t * The visual style of the card.\n\t * @default 'elevated'\n\t */\n\t@property({ reflect: true })\n\ttype: 'elevated' | 'filled' | 'outlined' = 'elevated'\n\n\t/**\n\t * Makes the card interactive (clickable).\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tinteractive = false\n\n\t/**\n\t * Disables the card.\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false\n\n\t/**\n\t * Indicates the card is being dragged.\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tdragged = false\n\n\t/**\n\t * URL to navigate to when card is clicked (makes it act like a link).\n\t */\n\t@property()\n\thref?: string\n\n\t/**\n\t * Target for the link navigation.\n\t */\n\t@property()\n\ttarget?: string\n\n\t/**\n\t * ARIA role for accessibility.\n\t */\n\t@property({ attribute: 'role' })\n\toverride role = 'article'\n\n\t/**\n\t * ARIA label for accessibility.\n\t */\n\t@property({ attribute: 'aria-label' })\n\toverride ariaLabel: string = ''\n\n\t// Internal state for interaction feedback\n\t@state() pressed = false\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\n\tprivate nextRippleId = 0\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Set appropriate ARIA attributes for interactive cards\n\t\tif (this.interactive && !this.disabled) {\n\t\t\tthis.setAttribute('tabindex', '0')\n\t\t\tif (!this.role || this.role === 'article') {\n\t\t\t\tthis.role = this.href ? 'link' : 'button'\n\t\t\t}\n\t\t}\n\t}\n\n\tupdated(changedProperties: Map<string, any>) {\n\t\tsuper.updated(changedProperties)\n\n\t\t// Update ARIA attributes when interactive or disabled state changes\n\t\tif (changedProperties.has('interactive') || changedProperties.has('disabled')) {\n\t\t\tif (this.interactive && !this.disabled) {\n\t\t\t\tthis.setAttribute('tabindex', '0')\n\t\t\t\tif (!this.role || this.role === 'article') {\n\t\t\t\t\tthis.role = this.href ? 'link' : 'button'\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute('tabindex')\n\t\t\t\tif (this.role === 'button' || this.role === 'link') {\n\t\t\t\t\tthis.role = 'article'\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate handleClick = (e: MouseEvent) => {\n\t\tif (this.disabled || !this.interactive) return\n\n\t\t// Add ripple effect at click position\n\t\tconst rect = this.getBoundingClientRect()\n\t\tconst x = e.clientX - rect.left\n\t\tconst y = e.clientY - rect.top\n\t\tconst id = this.nextRippleId++\n\n\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t// Remove ripple after animation completes\n\t\tsetTimeout(() => {\n\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t}, 600)\n\n\t\t// Navigate if href is provided\n\t\tif (this.href) {\n\t\t\tif (this.target === '_blank') {\n\t\t\t\twindow.open(this.href, '_blank')\n\t\t\t} else {\n\t\t\t\twindow.location.href = this.href\n\t\t\t}\n\t\t}\n\n\t\t// Dispatch click event for parent components to handle\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('schmancy-click', {\n\t\t\t\tdetail: { value: this.type },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled || !this.interactive) return\n\n\t\t// Activate on Enter or Space for keyboard navigation\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tthis.pressed = true\n\t\t\tthis.setAttribute('pressed', '')\n\n\t\t\t// Simulate click\n\t\t\tconst rect = this.getBoundingClientRect()\n\t\t\tconst x = rect.width / 2\n\t\t\tconst y = rect.height / 2\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\n\t\t\tif (this.href) {\n\t\t\t\tif (this.target === '_blank') {\n\t\t\t\t\twindow.open(this.href, '_blank')\n\t\t\t\t} else {\n\t\t\t\t\twindow.location.href = this.href\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('schmancy-click', {\n\t\t\t\t\tdetail: { value: this.type },\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\t}\n\n\tprivate handleKeyUp = (e: KeyboardEvent) => {\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\tthis.pressed = false\n\t\t\tthis.removeAttribute('pressed')\n\t\t}\n\t}\n\n\tprivate handleMouseDown = () => {\n\t\tif (this.disabled || !this.interactive) return\n\t\tthis.pressed = true\n\t\tthis.setAttribute('pressed', '')\n\t}\n\n\tprivate handleMouseUp = () => {\n\t\tthis.pressed = false\n\t\tthis.removeAttribute('pressed')\n\t}\n\n\tprivate handleMouseLeave = () => {\n\t\tthis.pressed = false\n\t\tthis.removeAttribute('pressed')\n\t}\n\n\t// Get the classes for state layer based on current state\n\tprivate getStateLayerOpacity(): string {\n\t\tif (!this.interactive || this.disabled) return 'opacity-0'\n\t\tif (this.pressed) return 'opacity-[0.1]' // M3 pressed: 0.1\n\t\treturn 'opacity-0 hover:opacity-[0.08] focus-visible:opacity-[0.1]' // M3 hover: 0.08, focus: 0.1\n\t}\n\n\tprotected render() {\n\t\tconst containerClasses = classMap({\n\t\t\t'relative w-full h-full rounded-xl': true,\n\t\t\t'cursor-pointer': this.interactive && !this.disabled,\n\t\t})\n\n\t\tconst stateLayerClasses = classMap({\n\t\t\t'absolute inset-0 rounded-xl pointer-events-none transition-opacity duration-200 bg-surface-on': true,\n\t\t\t[this.getStateLayerOpacity()]: true,\n\t\t})\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${containerClasses}\n\t\t\t\t@click=${this.handleClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@keyup=${this.handleKeyUp}\n\t\t\t\t@mousedown=${this.handleMouseDown}\n\t\t\t\t@mouseup=${this.handleMouseUp}\n\t\t\t\t@mouseleave=${this.handleMouseLeave}\n\t\t\t\taria-label=${ifDefined(this.ariaLabel)}\n\t\t\t\taria-disabled=${this.disabled ? 'true' : 'false'}\n\t\t\t>\n\t\t\t\t<!-- State layer for hover/focus/pressed states -->\n\t\t\t\t<div class=${stateLayerClasses}></div>\n\n\t\t\t\t<!-- Ripple container for click effects -->\n\t\t\t\t${this.interactive\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<div class=\"absolute inset-0 rounded-xl overflow-hidden pointer-events-none\">\n\t\t\t\t\t\t\t\t${this.ripples.map(\n\t\t\t\t\t\t\t\t\tripple => html`\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"absolute rounded-full scale-0 animate-[ripple_600ms_linear] bg-surface-on opacity-[0.12] pointer-events-none\"\n\t\t\t\t\t\t\t\t\t\t\tstyle=\"\n\t\t\t\t\t\t\t\t\t\t\t\tleft: ${ripple.x}px;\n\t\t\t\t\t\t\t\t\t\t\t\ttop: ${ripple.y}px;\n\t\t\t\t\t\t\t\t\t\t\t\twidth: 20px;\n\t\t\t\t\t\t\t\t\t\t\t\theight: 20px;\n\t\t\t\t\t\t\t\t\t\t\t\tmargin-left: -10px;\n\t\t\t\t\t\t\t\t\t\t\t\tmargin-top: -10px;\n\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`\n\t\t\t\t\t: ''}\n\n\t\t\t\t<!-- Card content -->\n\t\t\t\t<div class=\"relative h-full w-full rounded-xl\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-card': SchmancyCard\n\t}\n}\n","import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\n/**\n * @element schmancy-card-content\n */\n@customElement('schmancy-card-content')\nexport default class SchmancyCardContent extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tpadding: 1rem;\n\t}\n`) {\n\tprotected render(): unknown {\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-card-content': SchmancyCardContent\n\t}\n}\n","import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n * @element schmancy-card-media\n */\n@customElement('schmancy-card-media')\nexport default class SchmancyCardMedia extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\theight: 200px;\n\t\toverflow: hidden;\n\t}\n\t\n\t/* Allow height to be overridden when used in flex/grid layouts */\n\t:host-context(.h-full) {\n\t\theight: 100%;\n\t}\n\t\n\t::slotted(img),\n\timg {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-position: center;\n\t}\n\t\n\t/* Object fit styles based on fit attribute */\n\t:host([fit=\"contain\"]) img,\n\t:host([fit=\"contain\"]) ::slotted(img) {\n\t\tobject-fit: contain;\n\t}\n\t\n\t:host([fit=\"cover\"]) img,\n\t:host([fit=\"cover\"]) ::slotted(img) {\n\t\tobject-fit: cover;\n\t}\n\t\n\t:host([fit=\"fill\"]) img,\n\t:host([fit=\"fill\"]) ::slotted(img) {\n\t\tobject-fit: fill;\n\t}\n\t\n\t:host([fit=\"none\"]) img,\n\t:host([fit=\"none\"]) ::slotted(img) {\n\t\tobject-fit: none;\n\t}\n\t\n\t:host([fit=\"scale-down\"]) img,\n\t:host([fit=\"scale-down\"]) ::slotted(img) {\n\t\tobject-fit: scale-down;\n\t}\n`) {\n\t@property({ type: String, reflect: true })\n\tsrc: string = ''\n\n\t@property({ type: String, reflect: true })\n\tfit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' = 'contain'\n\t\n\t@property({ type: String })\n\talt: string = ''\n\n\tprotected render(): unknown {\n\t\t// If src is provided, render an img element\n\t\t// Otherwise, allow users to slot their own content\n\t\treturn this.src \n\t\t\t? html`<img src=\"${this.src}\" alt=\"${this.alt}\" />` \n\t\t\t: html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-card-media': SchmancyCardMedia\n\t}\n}\n"],"names":["SchmancyCardAction","TailwindElement","css","render","html","customElement","SchmancyCard","super","arguments","this","type","interactive","disabled","dragged","role","ariaLabel","pressed","ripples","nextRippleId","handleClick","e","rect","getBoundingClientRect","x","clientX","left","y","clientY","top","id","setTimeout","filter","r","href","target","window","open","location","dispatchEvent","CustomEvent","detail","value","bubbles","composed","handleKeyDown","key","preventDefault","setAttribute","width","height","handleKeyUp","removeAttribute","handleMouseDown","handleMouseUp","handleMouseLeave","connectedCallback","changedProperties","updated","has","containerClasses","classMap","stateLayerClasses","getStateLayerOpacity","ifDefined","map","ripple","shadowRootOptions","LitElement","mode","delegatesFocus","__decorateClass","property","reflect","prototype","Boolean","attribute","state","SchmancyCardContent","SchmancyCardMedia","constructor","src","fit","alt","String"],"mappings":"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"}