@mhmo91/schmancy 0.8.6 → 0.9.2

package/dist/card-Csvu8UJ9.cjs

@@ -0,0 +1,177 @@
+require(`./chunk-BCfY8kxB.cjs`);const e=require(`./tailwind.mixin-DGiyLbEi.cjs`);require(`./mixins.cjs`);const t=require(`./cursor-glow-DtSy_PJd.cjs`);let n=require(`lit/decorators.js`),r=require(`lit`),i=require(`lit/directives/if-defined.js`);var a=class extends e.t(r.css`
+	:host {
+		display: flex;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+		align-items: center;
+		justify-content: flex-end;
+	}
+`){render(){return r.html`<slot></slot>`}};a=e.i([(0,n.customElement)(`schmancy-card-action`)],a);var o=class extends e.t(r.css`
+	:host {
+		display: block;
+		position: relative;
+		border-radius: var(--schmancy-sys-shape-corner-medium);
+		transition:
+			box-shadow var(--schmancy-sys-motion-duration-short4) var(--schmancy-sys-motion-easing-standard),
+			transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+		outline: none;
+	}
+
+	/* Type variants */
+	:host([type='elevated']) {
+		background-color: var(--schmancy-sys-color-surface-low);
+		box-shadow: var(--schmancy-sys-elevation-1);
+	}
+	:host([type='filled']) {
+		background-color: var(--schmancy-sys-color-surface-highest);
+		box-shadow: var(--schmancy-sys-elevation-0);
+	}
+	:host([type='outlined']) {
+		background-color: var(--schmancy-sys-color-surface-default);
+		border: 1px solid var(--schmancy-sys-color-outlineVariant);
+		box-shadow: var(--schmancy-sys-elevation-0);
+	}
+
+	/* Interactive states */
+	:host([interactive]) {
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+	:host([interactive]:focus-visible:not([disabled])) {
+		outline: 2px solid var(--schmancy-sys-color-primary-default);
+		outline-offset: 2px;
+	}
+	:host([disabled]) {
+		pointer-events: none;
+		opacity: var(--schmancy-sys-state-disabled-opacity);
+	}
+
+	/* Hover elevations — luminous glow + lift */
+	:host([type='elevated'][interactive]:hover:not([disabled])) {
+		box-shadow:
+			var(--schmancy-sys-elevation-2),
+			0 4px 24px -6px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 12%, transparent);
+		transform: translateY(-2px);
+	}
+	:host([type='filled'][interactive]:hover:not([disabled])),
+	:host([type='outlined'][interactive]:hover:not([disabled])) {
+		box-shadow:
+			var(--schmancy-sys-elevation-1),
+			0 4px 20px -6px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 10%, transparent);
+		transform: translateY(-1px);
+	}
+
+	/* Active state — kinetic compress */
+	:host([interactive]:active:not([disabled])) {
+		transform: scale(0.98);
+		transition-duration: 100ms;
+	}
+
+	/* Dragged state */
+	:host([dragged]) {
+		box-shadow:
+			var(--schmancy-sys-elevation-3),
+			0 8px 32px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);
+		transform: translateY(-4px);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host([interactive]:hover:not([disabled])),
+		:host([interactive]:active:not([disabled])),
+		:host([dragged]) {
+			transform: none;
+		}
+	}
+
+	@keyframes ripple {
+		to {
+			transform: scale(4);
+			opacity: 0;
+		}
+	}
+`){constructor(...e){super(...e),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;let t=this.getBoundingClientRect();this._triggerAction(e.clientX-t.left,e.clientY-t.top)},this.handleKeyDown=e=>{if(!this.disabled&&this.interactive&&(e.key===`Enter`||e.key===` `)){e.preventDefault(),this._setPressed(!0);let t=this.getBoundingClientRect();this._triggerAction(t.width/2,t.height/2)}},this.handleKeyUp=e=>{e.key!==`Enter`&&e.key!==` `||this._setPressed(!1)},this.handleMouseDown=()=>{!this.disabled&&this.interactive&&this._setPressed(!0)},this.handleMouseUp=()=>this._setPressed(!1),this.handleMouseLeave=()=>this._setPressed(!1)}static{this.shadowRootOptions={...r.LitElement.shadowRootOptions,mode:`open`,delegatesFocus:!0}}connectedCallback(){super.connectedCallback(),this._updateAriaAttributes()}updated(e){super.updated(e),(e.has(`interactive`)||e.has(`disabled`))&&this._updateAriaAttributes()}_updateAriaAttributes(){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`))}_addRipple(e,t){let n=this.nextRippleId++;this.ripples=[...this.ripples,{x:e,y:t,id:n}],setTimeout(()=>{this.ripples=this.ripples.filter(e=>e.id!==n)},600)}_navigate(){this.href&&(this.target===`_blank`?window.open(this.href,`_blank`):window.location.href=this.href)}_triggerAction(e,t){this._addRipple(e,t),this._navigate(),this.dispatchEvent(new CustomEvent(`schmancy-click`,{detail:{value:this.type},bubbles:!0,composed:!0}))}_setPressed(e){this.pressed=e,e?this.setAttribute(`pressed`,``):this.removeAttribute(`pressed`)}render(){let e=this.interactive&&!this.disabled;return r.html`
+			<div
+				${e?t.t({radius:200,intensity:.1}):``}
+				class="relative w-full h-full rounded-xl ${e?`cursor-pointer`:``}"
+				@click=${this.handleClick}
+				@keydown=${this.handleKeyDown}
+				@keyup=${this.handleKeyUp}
+				@mousedown=${this.handleMouseDown}
+				@mouseup=${this.handleMouseUp}
+				@mouseleave=${this.handleMouseLeave}
+				aria-label=${(0,i.ifDefined)(this.ariaLabel)}
+				aria-disabled=${this.disabled?`true`:`false`}
+			>
+				<!-- State layer -->
+				<div
+					class="absolute inset-0 rounded-xl pointer-events-none transition-opacity duration-200 bg-surface-on ${e?this.pressed?`opacity-[var(--schmancy-sys-state-pressed-opacity)]`:`opacity-0 hover:opacity-[var(--schmancy-sys-state-hover-opacity)] focus-visible:opacity-[var(--schmancy-sys-state-focus-opacity)]`:`opacity-0`}"
+				></div>
+
+				<!-- Ripples -->
+				${this.interactive&&this.ripples.length?r.html`
+							<div class="absolute inset-0 rounded-xl overflow-hidden pointer-events-none">
+								${this.ripples.map(e=>r.html`
+										<span
+											class="absolute rounded-full scale-0 animate-[ripple_600ms_linear] bg-surface-on opacity-[0.12] w-5 h-5 -ml-2.5 -mt-2.5"
+											style="left: ${e.x}px; top: ${e.y}px"
+										></span>
+									`)}
+							</div>
+						`:``}
+
+				<!-- Content -->
+				<div class="relative h-full w-full rounded-xl">
+					<slot></slot>
+				</div>
+			</div>
+		`}};e.i([(0,n.property)({reflect:!0})],o.prototype,`type`,void 0),e.i([(0,n.property)({type:Boolean,reflect:!0})],o.prototype,`interactive`,void 0),e.i([(0,n.property)({type:Boolean,reflect:!0})],o.prototype,`disabled`,void 0),e.i([(0,n.property)({type:Boolean,reflect:!0})],o.prototype,`dragged`,void 0),e.i([(0,n.property)()],o.prototype,`href`,void 0),e.i([(0,n.property)()],o.prototype,`target`,void 0),e.i([(0,n.property)({attribute:`role`})],o.prototype,`role`,void 0),e.i([(0,n.property)({attribute:`aria-label`})],o.prototype,`ariaLabel`,void 0),e.i([(0,n.state)()],o.prototype,`pressed`,void 0),e.i([(0,n.state)()],o.prototype,`ripples`,void 0),o=e.i([(0,n.customElement)(`schmancy-card`)],o);var s=class extends e.t(r.css`
+	:host {
+		display: block;
+		padding: 1rem;
+	}
+`){render(){return r.html`<slot></slot>`}};s=e.i([(0,n.customElement)(`schmancy-card-content`)],s);var c=class extends e.t(r.css`
+	:host {
+		display: block;
+		position: relative;
+		height: 200px;
+		overflow: hidden;
+	}
+	
+	/* Allow height to be overridden when used in flex/grid layouts */
+	:host-context(.h-full) {
+		height: 100%;
+	}
+	
+	::slotted(img),
+	img {
+		width: 100%;
+		height: 100%;
+		object-position: center;
+	}
+	
+	/* Object fit styles based on fit attribute */
+	:host([fit="contain"]) img,
+	:host([fit="contain"]) ::slotted(img) {
+		object-fit: contain;
+	}
+	
+	:host([fit="cover"]) img,
+	:host([fit="cover"]) ::slotted(img) {
+		object-fit: cover;
+	}
+	
+	:host([fit="fill"]) img,
+	:host([fit="fill"]) ::slotted(img) {
+		object-fit: fill;
+	}
+	
+	:host([fit="none"]) img,
+	:host([fit="none"]) ::slotted(img) {
+		object-fit: none;
+	}
+	
+	:host([fit="scale-down"]) img,
+	:host([fit="scale-down"]) ::slotted(img) {
+		object-fit: scale-down;
+	}
+`){constructor(...e){super(...e),this.src=``,this.fit=`contain`,this.alt=``}render(){return this.src?r.html`<img src="${this.src}" alt="${this.alt}" />`:r.html`<slot></slot>`}};e.i([(0,n.property)({type:String,reflect:!0})],c.prototype,`src`,void 0),e.i([(0,n.property)({type:String,reflect:!0})],c.prototype,`fit`,void 0),e.i([(0,n.property)({type:String})],c.prototype,`alt`,void 0),c=e.i([(0,n.customElement)(`schmancy-card-media`)],c);

package/dist/card-Csvu8UJ9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-Csvu8UJ9.cjs","names":[],"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 { cursorGlow } from '../directives/cursor-glow'\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: var(--schmancy-sys-shape-corner-medium);\n\t\ttransition:\n\t\t\tbox-shadow var(--schmancy-sys-motion-duration-short4) var(--schmancy-sys-motion-easing-standard),\n\t\t\ttransform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);\n\t\toutline: none;\n\t}\n\n\t/* Type variants */\n\t:host([type='elevated']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-low);\n\t\tbox-shadow: var(--schmancy-sys-elevation-1);\n\t}\n\t:host([type='filled']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-highest);\n\t\tbox-shadow: var(--schmancy-sys-elevation-0);\n\t}\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(--schmancy-sys-elevation-0);\n\t}\n\n\t/* Interactive states */\n\t:host([interactive]) {\n\t\tcursor: pointer;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\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\t:host([disabled]) {\n\t\tpointer-events: none;\n\t\topacity: var(--schmancy-sys-state-disabled-opacity);\n\t}\n\n\t/* Hover elevations — luminous glow + lift */\n\t:host([type='elevated'][interactive]:hover:not([disabled])) {\n\t\tbox-shadow:\n\t\t\tvar(--schmancy-sys-elevation-2),\n\t\t\t0 4px 24px -6px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 12%, transparent);\n\t\ttransform: translateY(-2px);\n\t}\n\t:host([type='filled'][interactive]:hover:not([disabled])),\n\t:host([type='outlined'][interactive]:hover:not([disabled])) {\n\t\tbox-shadow:\n\t\t\tvar(--schmancy-sys-elevation-1),\n\t\t\t0 4px 20px -6px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 10%, transparent);\n\t\ttransform: translateY(-1px);\n\t}\n\n\t/* Active state — kinetic compress */\n\t:host([interactive]:active:not([disabled])) {\n\t\ttransform: scale(0.98);\n\t\ttransition-duration: 100ms;\n\t}\n\n\t/* Dragged state */\n\t:host([dragged]) {\n\t\tbox-shadow:\n\t\t\tvar(--schmancy-sys-elevation-3),\n\t\t\t0 8px 32px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);\n\t\ttransform: translateY(-4px);\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host([interactive]:hover:not([disabled])),\n\t\t:host([interactive]:active:not([disabled])),\n\t\t:host([dragged]) {\n\t\t\ttransform: none;\n\t\t}\n\t}\n\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\t\tthis._updateAriaAttributes()\n\t}\n\n\tupdated(changedProperties: Map<string, any>) {\n\t\tsuper.updated(changedProperties)\n\t\tif (changedProperties.has('interactive') || changedProperties.has('disabled')) {\n\t\t\tthis._updateAriaAttributes()\n\t\t}\n\t}\n\n\t// Consolidate ARIA attribute updates\n\tprivate _updateAriaAttributes() {\n\t\tconst isInteractive = this.interactive && !this.disabled\n\n\t\tif (isInteractive) {\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} else {\n\t\t\tthis.removeAttribute('tabindex')\n\t\t\tif (this.role === 'button' || this.role === 'link') {\n\t\t\t\tthis.role = 'article'\n\t\t\t}\n\t\t}\n\t}\n\n\t// Shared ripple creation logic\n\tprivate _addRipple(x: number, y: number) {\n\t\tconst id = this.nextRippleId++\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) // M3 medium duration\n\t}\n\n\t// Shared navigation logic\n\tprivate _navigate() {\n\t\tif (!this.href) return\n\n\t\tif (this.target === '_blank') {\n\t\t\twindow.open(this.href, '_blank')\n\t\t} else {\n\t\t\twindow.location.href = this.href\n\t\t}\n\t}\n\n\t// Combined action trigger (ripple + navigate + event)\n\tprivate _triggerAction(x: number, y: number) {\n\t\tthis._addRipple(x, y)\n\t\tthis._navigate()\n\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 handleClick = (e: MouseEvent) => {\n\t\tif (this.disabled || !this.interactive) return\n\n\t\tconst rect = this.getBoundingClientRect()\n\t\tthis._triggerAction(e.clientX - rect.left, e.clientY - rect.top)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled || !this.interactive) return\n\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tthis._setPressed(true)\n\n\t\t\t// Simulate click at center\n\t\t\tconst rect = this.getBoundingClientRect()\n\t\t\tthis._triggerAction(rect.width / 2, rect.height / 2)\n\t\t}\n\t}\n\n\tprivate handleKeyUp = (e: KeyboardEvent) => {\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\tthis._setPressed(false)\n\t\t}\n\t}\n\n\t// Consolidate pressed state management\n\tprivate _setPressed(pressed: boolean) {\n\t\tthis.pressed = pressed\n\t\tif (pressed) {\n\t\t\tthis.setAttribute('pressed', '')\n\t\t} else {\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._setPressed(true)\n\t}\n\n\tprivate handleMouseUp = () => this._setPressed(false)\n\tprivate handleMouseLeave = () => this._setPressed(false)\n\n\tprotected render() {\n\t\tconst isInteractive = this.interactive && !this.disabled\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\t${isInteractive ? cursorGlow({ radius: 200, intensity: 0.1 }) : ''}\n\t\t\t\tclass=\"relative w-full h-full rounded-xl ${isInteractive ? 'cursor-pointer' : ''}\"\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 -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"absolute inset-0 rounded-xl pointer-events-none transition-opacity duration-200 bg-surface-on ${!isInteractive\n\t\t\t\t\t\t? 'opacity-0'\n\t\t\t\t\t\t: this.pressed\n\t\t\t\t\t\t\t? 'opacity-[var(--schmancy-sys-state-pressed-opacity)]'\n\t\t\t\t\t\t\t: 'opacity-0 hover:opacity-[var(--schmancy-sys-state-hover-opacity)] focus-visible:opacity-[var(--schmancy-sys-state-focus-opacity)]'}\"\n\t\t\t\t></div>\n\n\t\t\t\t<!-- Ripples -->\n\t\t\t\t${this.interactive && this.ripples.length\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\tr => 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] w-5 h-5 -ml-2.5 -mt-2.5\"\n\t\t\t\t\t\t\t\t\t\t\tstyle=\"left: ${r.x}px; top: ${r.y}px\"\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<!-- 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"],"mappings":"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"}

package/dist/card-DM_miKMd.js

@@ -0,0 +1,284 @@
+import { i as e, t } from "./tailwind.mixin-C4cx3IOr.js";
+import "./mixins.js";
+import { t as n } from "./cursor-glow-Ah7VXSj7.js";
+import { customElement as r, property as i, state as a } from "lit/decorators.js";
+import { LitElement as o, css as s, html as c } from "lit";
+import { ifDefined as l } from "lit/directives/if-defined.js";
+var u = class extends t(s`
+	:host {
+		display: flex;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+		align-items: center;
+		justify-content: flex-end;
+	}
+`) {
+	render() {
+		return c`<slot></slot>`;
+	}
+};
+u = e([r("schmancy-card-action")], u);
+var d = class extends t(s`
+	:host {
+		display: block;
+		position: relative;
+		border-radius: var(--schmancy-sys-shape-corner-medium);
+		transition:
+			box-shadow var(--schmancy-sys-motion-duration-short4) var(--schmancy-sys-motion-easing-standard),
+			transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+		outline: none;
+	}
+
+	/* Type variants */
+	:host([type='elevated']) {
+		background-color: var(--schmancy-sys-color-surface-low);
+		box-shadow: var(--schmancy-sys-elevation-1);
+	}
+	:host([type='filled']) {
+		background-color: var(--schmancy-sys-color-surface-highest);
+		box-shadow: var(--schmancy-sys-elevation-0);
+	}
+	:host([type='outlined']) {
+		background-color: var(--schmancy-sys-color-surface-default);
+		border: 1px solid var(--schmancy-sys-color-outlineVariant);
+		box-shadow: var(--schmancy-sys-elevation-0);
+	}
+
+	/* Interactive states */
+	:host([interactive]) {
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+	:host([interactive]:focus-visible:not([disabled])) {
+		outline: 2px solid var(--schmancy-sys-color-primary-default);
+		outline-offset: 2px;
+	}
+	:host([disabled]) {
+		pointer-events: none;
+		opacity: var(--schmancy-sys-state-disabled-opacity);
+	}
+
+	/* Hover elevations — luminous glow + lift */
+	:host([type='elevated'][interactive]:hover:not([disabled])) {
+		box-shadow:
+			var(--schmancy-sys-elevation-2),
+			0 4px 24px -6px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 12%, transparent);
+		transform: translateY(-2px);
+	}
+	:host([type='filled'][interactive]:hover:not([disabled])),
+	:host([type='outlined'][interactive]:hover:not([disabled])) {
+		box-shadow:
+			var(--schmancy-sys-elevation-1),
+			0 4px 20px -6px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 10%, transparent);
+		transform: translateY(-1px);
+	}
+
+	/* Active state — kinetic compress */
+	:host([interactive]:active:not([disabled])) {
+		transform: scale(0.98);
+		transition-duration: 100ms;
+	}
+
+	/* Dragged state */
+	:host([dragged]) {
+		box-shadow:
+			var(--schmancy-sys-elevation-3),
+			0 8px 32px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);
+		transform: translateY(-4px);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host([interactive]:hover:not([disabled])),
+		:host([interactive]:active:not([disabled])),
+		:host([dragged]) {
+			transform: none;
+		}
+	}
+
+	@keyframes ripple {
+		to {
+			transform: scale(4);
+			opacity: 0;
+		}
+	}
+`) {
+	constructor(...e) {
+		super(...e), 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;
+			let t = this.getBoundingClientRect();
+			this._triggerAction(e.clientX - t.left, e.clientY - t.top);
+		}, this.handleKeyDown = (e) => {
+			if (!this.disabled && this.interactive && (e.key === "Enter" || e.key === " ")) {
+				e.preventDefault(), this._setPressed(!0);
+				let t = this.getBoundingClientRect();
+				this._triggerAction(t.width / 2, t.height / 2);
+			}
+		}, this.handleKeyUp = (e) => {
+			e.key !== "Enter" && e.key !== " " || this._setPressed(!1);
+		}, this.handleMouseDown = () => {
+			!this.disabled && this.interactive && this._setPressed(!0);
+		}, this.handleMouseUp = () => this._setPressed(!1), this.handleMouseLeave = () => this._setPressed(!1);
+	}
+	static {
+		this.shadowRootOptions = {
+			...o.shadowRootOptions,
+			mode: "open",
+			delegatesFocus: !0
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._updateAriaAttributes();
+	}
+	updated(e) {
+		super.updated(e), (e.has("interactive") || e.has("disabled")) && this._updateAriaAttributes();
+	}
+	_updateAriaAttributes() {
+		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"));
+	}
+	_addRipple(e, t) {
+		let n = this.nextRippleId++;
+		this.ripples = [...this.ripples, {
+			x: e,
+			y: t,
+			id: n
+		}], setTimeout(() => {
+			this.ripples = this.ripples.filter((e) => e.id !== n);
+		}, 600);
+	}
+	_navigate() {
+		this.href && (this.target === "_blank" ? window.open(this.href, "_blank") : window.location.href = this.href);
+	}
+	_triggerAction(e, t) {
+		this._addRipple(e, t), this._navigate(), this.dispatchEvent(new CustomEvent("schmancy-click", {
+			detail: { value: this.type },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_setPressed(e) {
+		this.pressed = e, e ? this.setAttribute("pressed", "") : this.removeAttribute("pressed");
+	}
+	render() {
+		let e = this.interactive && !this.disabled;
+		return c`
+			<div
+				${e ? n({
+			radius: 200,
+			intensity: .1
+		}) : ""}
+				class="relative w-full h-full rounded-xl ${e ? "cursor-pointer" : ""}"
+				@click=${this.handleClick}
+				@keydown=${this.handleKeyDown}
+				@keyup=${this.handleKeyUp}
+				@mousedown=${this.handleMouseDown}
+				@mouseup=${this.handleMouseUp}
+				@mouseleave=${this.handleMouseLeave}
+				aria-label=${l(this.ariaLabel)}
+				aria-disabled=${this.disabled ? "true" : "false"}
+			>
+				<!-- State layer -->
+				<div
+					class="absolute inset-0 rounded-xl pointer-events-none transition-opacity duration-200 bg-surface-on ${e ? this.pressed ? "opacity-[var(--schmancy-sys-state-pressed-opacity)]" : "opacity-0 hover:opacity-[var(--schmancy-sys-state-hover-opacity)] focus-visible:opacity-[var(--schmancy-sys-state-focus-opacity)]" : "opacity-0"}"
+				></div>
+
+				<!-- Ripples -->
+				${this.interactive && this.ripples.length ? c`
+							<div class="absolute inset-0 rounded-xl overflow-hidden pointer-events-none">
+								${this.ripples.map((e) => c`
+										<span
+											class="absolute rounded-full scale-0 animate-[ripple_600ms_linear] bg-surface-on opacity-[0.12] w-5 h-5 -ml-2.5 -mt-2.5"
+											style="left: ${e.x}px; top: ${e.y}px"
+										></span>
+									`)}
+							</div>
+						` : ""}
+
+				<!-- Content -->
+				<div class="relative h-full w-full rounded-xl">
+					<slot></slot>
+				</div>
+			</div>
+		`;
+	}
+};
+e([i({ reflect: !0 })], d.prototype, "type", void 0), e([i({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "interactive", void 0), e([i({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), e([i({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "dragged", void 0), e([i()], d.prototype, "href", void 0), e([i()], d.prototype, "target", void 0), e([i({ attribute: "role" })], d.prototype, "role", void 0), e([i({ attribute: "aria-label" })], d.prototype, "ariaLabel", void 0), e([a()], d.prototype, "pressed", void 0), e([a()], d.prototype, "ripples", void 0), d = e([r("schmancy-card")], d);
+var f = class extends t(s`
+	:host {
+		display: block;
+		padding: 1rem;
+	}
+`) {
+	render() {
+		return c`<slot></slot>`;
+	}
+};
+f = e([r("schmancy-card-content")], f);
+var p = class extends t(s`
+	:host {
+		display: block;
+		position: relative;
+		height: 200px;
+		overflow: hidden;
+	}
+	
+	/* Allow height to be overridden when used in flex/grid layouts */
+	:host-context(.h-full) {
+		height: 100%;
+	}
+	
+	::slotted(img),
+	img {
+		width: 100%;
+		height: 100%;
+		object-position: center;
+	}
+	
+	/* Object fit styles based on fit attribute */
+	:host([fit="contain"]) img,
+	:host([fit="contain"]) ::slotted(img) {
+		object-fit: contain;
+	}
+	
+	:host([fit="cover"]) img,
+	:host([fit="cover"]) ::slotted(img) {
+		object-fit: cover;
+	}
+	
+	:host([fit="fill"]) img,
+	:host([fit="fill"]) ::slotted(img) {
+		object-fit: fill;
+	}
+	
+	:host([fit="none"]) img,
+	:host([fit="none"]) ::slotted(img) {
+		object-fit: none;
+	}
+	
+	:host([fit="scale-down"]) img,
+	:host([fit="scale-down"]) ::slotted(img) {
+		object-fit: scale-down;
+	}
+`) {
+	constructor(...e) {
+		super(...e), this.src = "", this.fit = "contain", this.alt = "";
+	}
+	render() {
+		return this.src ? c`<img src="${this.src}" alt="${this.alt}" />` : c`<slot></slot>`;
+	}
+};
+e([i({
+	type: String,
+	reflect: !0
+})], p.prototype, "src", void 0), e([i({
+	type: String,
+	reflect: !0
+})], p.prototype, "fit", void 0), e([i({ type: String })], p.prototype, "alt", void 0), p = e([r("schmancy-card-media")], p);

package/dist/card-DM_miKMd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-DM_miKMd.js","names":[],"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 { cursorGlow } from '../directives/cursor-glow'\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: var(--schmancy-sys-shape-corner-medium);\n\t\ttransition:\n\t\t\tbox-shadow var(--schmancy-sys-motion-duration-short4) var(--schmancy-sys-motion-easing-standard),\n\t\t\ttransform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);\n\t\toutline: none;\n\t}\n\n\t/* Type variants */\n\t:host([type='elevated']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-low);\n\t\tbox-shadow: var(--schmancy-sys-elevation-1);\n\t}\n\t:host([type='filled']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-highest);\n\t\tbox-shadow: var(--schmancy-sys-elevation-0);\n\t}\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(--schmancy-sys-elevation-0);\n\t}\n\n\t/* Interactive states */\n\t:host([interactive]) {\n\t\tcursor: pointer;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\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\t:host([disabled]) {\n\t\tpointer-events: none;\n\t\topacity: var(--schmancy-sys-state-disabled-opacity);\n\t}\n\n\t/* Hover elevations — luminous glow + lift */\n\t:host([type='elevated'][interactive]:hover:not([disabled])) {\n\t\tbox-shadow:\n\t\t\tvar(--schmancy-sys-elevation-2),\n\t\t\t0 4px 24px -6px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 12%, transparent);\n\t\ttransform: translateY(-2px);\n\t}\n\t:host([type='filled'][interactive]:hover:not([disabled])),\n\t:host([type='outlined'][interactive]:hover:not([disabled])) {\n\t\tbox-shadow:\n\t\t\tvar(--schmancy-sys-elevation-1),\n\t\t\t0 4px 20px -6px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 10%, transparent);\n\t\ttransform: translateY(-1px);\n\t}\n\n\t/* Active state — kinetic compress */\n\t:host([interactive]:active:not([disabled])) {\n\t\ttransform: scale(0.98);\n\t\ttransition-duration: 100ms;\n\t}\n\n\t/* Dragged state */\n\t:host([dragged]) {\n\t\tbox-shadow:\n\t\t\tvar(--schmancy-sys-elevation-3),\n\t\t\t0 8px 32px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);\n\t\ttransform: translateY(-4px);\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host([interactive]:hover:not([disabled])),\n\t\t:host([interactive]:active:not([disabled])),\n\t\t:host([dragged]) {\n\t\t\ttransform: none;\n\t\t}\n\t}\n\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\t\tthis._updateAriaAttributes()\n\t}\n\n\tupdated(changedProperties: Map<string, any>) {\n\t\tsuper.updated(changedProperties)\n\t\tif (changedProperties.has('interactive') || changedProperties.has('disabled')) {\n\t\t\tthis._updateAriaAttributes()\n\t\t}\n\t}\n\n\t// Consolidate ARIA attribute updates\n\tprivate _updateAriaAttributes() {\n\t\tconst isInteractive = this.interactive && !this.disabled\n\n\t\tif (isInteractive) {\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} else {\n\t\t\tthis.removeAttribute('tabindex')\n\t\t\tif (this.role === 'button' || this.role === 'link') {\n\t\t\t\tthis.role = 'article'\n\t\t\t}\n\t\t}\n\t}\n\n\t// Shared ripple creation logic\n\tprivate _addRipple(x: number, y: number) {\n\t\tconst id = this.nextRippleId++\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) // M3 medium duration\n\t}\n\n\t// Shared navigation logic\n\tprivate _navigate() {\n\t\tif (!this.href) return\n\n\t\tif (this.target === '_blank') {\n\t\t\twindow.open(this.href, '_blank')\n\t\t} else {\n\t\t\twindow.location.href = this.href\n\t\t}\n\t}\n\n\t// Combined action trigger (ripple + navigate + event)\n\tprivate _triggerAction(x: number, y: number) {\n\t\tthis._addRipple(x, y)\n\t\tthis._navigate()\n\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 handleClick = (e: MouseEvent) => {\n\t\tif (this.disabled || !this.interactive) return\n\n\t\tconst rect = this.getBoundingClientRect()\n\t\tthis._triggerAction(e.clientX - rect.left, e.clientY - rect.top)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled || !this.interactive) return\n\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tthis._setPressed(true)\n\n\t\t\t// Simulate click at center\n\t\t\tconst rect = this.getBoundingClientRect()\n\t\t\tthis._triggerAction(rect.width / 2, rect.height / 2)\n\t\t}\n\t}\n\n\tprivate handleKeyUp = (e: KeyboardEvent) => {\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\tthis._setPressed(false)\n\t\t}\n\t}\n\n\t// Consolidate pressed state management\n\tprivate _setPressed(pressed: boolean) {\n\t\tthis.pressed = pressed\n\t\tif (pressed) {\n\t\t\tthis.setAttribute('pressed', '')\n\t\t} else {\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._setPressed(true)\n\t}\n\n\tprivate handleMouseUp = () => this._setPressed(false)\n\tprivate handleMouseLeave = () => this._setPressed(false)\n\n\tprotected render() {\n\t\tconst isInteractive = this.interactive && !this.disabled\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\t${isInteractive ? cursorGlow({ radius: 200, intensity: 0.1 }) : ''}\n\t\t\t\tclass=\"relative w-full h-full rounded-xl ${isInteractive ? 'cursor-pointer' : ''}\"\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 -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"absolute inset-0 rounded-xl pointer-events-none transition-opacity duration-200 bg-surface-on ${!isInteractive\n\t\t\t\t\t\t? 'opacity-0'\n\t\t\t\t\t\t: this.pressed\n\t\t\t\t\t\t\t? 'opacity-[var(--schmancy-sys-state-pressed-opacity)]'\n\t\t\t\t\t\t\t: 'opacity-0 hover:opacity-[var(--schmancy-sys-state-hover-opacity)] focus-visible:opacity-[var(--schmancy-sys-state-focus-opacity)]'}\"\n\t\t\t\t></div>\n\n\t\t\t\t<!-- Ripples -->\n\t\t\t\t${this.interactive && this.ripples.length\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\tr => 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] w-5 h-5 -ml-2.5 -mt-2.5\"\n\t\t\t\t\t\t\t\t\t\t\tstyle=\"left: ${r.x}px; top: ${r.y}px\"\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<!-- 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"],"mappings":";;;;;;AASe,IAAA,IAAA,cAAiC,EAAgB,CAAG;;;;;;;;;CASlE,SAAA;AACC,SAAO,CAAI;;;AAAA,IAAA,EAAA,CAXZ,EAAc,uBAAA,CAAA,EAAuB,EAAA;ACDvB,IAAA,IAAA,cAA2B,EAAgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA+FjB,YAAA,KAAA,cAAA,CAO7B,GAAA,KAAA,WAAA,CAOH,GAAA,KAAA,UAAA,CAOD,GAAA,KAAA,OAkBM,WAAA,KAAA,YAMa,IAAA,KAAA,UAAA,CAGV,GAAA,KAAA,UACqD,EAAA,EAAA,KAAA,eAEjD,GAAA,KAAA,eAmEA,MAAA;AACtB,OAAI,KAAK,YAAA,CAAa,KAAK,YAAa;GAExC,IAAM,IAAO,KAAK,uBAAA;AAClB,QAAK,eAAe,EAAE,UAAU,EAAK,MAAM,EAAE,UAAU,EAAK,IAAA;KAAA,KAAA,iBAGpC,MAAA;AACxB,OAAA,CAAI,KAAK,YAAa,KAAK,gBAEvB,EAAE,QAAQ,WAAW,EAAE,QAAQ,MAAK;AACvC,MAAE,gBAAA,EACF,KAAK,YAAA,CAAY,EAAA;IAGjB,IAAM,IAAO,KAAK,uBAAA;AAClB,SAAK,eAAe,EAAK,QAAQ,GAAG,EAAK,SAAS,EAAA;;KAAA,KAAA,eAI7B,MAAA;AACR,GAAV,EAAE,QAAQ,WAAW,EAAE,QAAQ,OAClC,KAAK,YAAA,CAAY,EAAA;KAAA,KAAA,wBAAA;AAAA,IAed,KAAK,YAAa,KAAK,eAC3B,KAAK,YAAA,CAAY,EAAA;KAAA,KAAA,sBAGY,KAAK,YAAA,CAAY,EAAA,EAAA,KAAA,yBACd,KAAK,YAAA,CAAY,EAAA;;CAAA;AAAA,OAAA,oBA3Kb;GAAA,GACjC,EAAW;GACd,MAAM;GACN,gBAAA,CAAgB;GAAA;;CA6DjB,oBAAA;AACC,QAAM,mBAAA,EACN,KAAK,uBAAA;;CAGN,QAAQ,GAAA;AACP,QAAM,QAAQ,EAAA,GACV,EAAkB,IAAI,cAAA,IAAkB,EAAkB,IAAI,WAAA,KACjE,KAAK,uBAAA;;CAKP,wBAAA;AACuB,OAAK,eAAA,CAAgB,KAAK,YAG/C,KAAK,aAAa,YAAY,IAAA,EACzB,KAAK,QAAQ,KAAK,SAAS,cAC/B,KAAK,OAAO,KAAK,OAAO,SAAS,cAGlC,KAAK,gBAAgB,WAAA,EACjB,KAAK,SAAS,YAAY,KAAK,SAAS,WAC3C,KAAK,OAAO;;CAMf,WAAmB,GAAW,GAAA;EAC7B,IAAM,IAAK,KAAK;AAChB,OAAK,UAAU,CAAA,GAAI,KAAK,SAAS;GAAE,GAAA;GAAG,GAAA;GAAG,IAAA;GAAA,CAAA,EAGzC,iBAAA;AACC,QAAK,UAAU,KAAK,QAAQ,QAAO,MAAK,EAAE,OAAO,EAAA;KAC/C,IAAA;;CAIJ,YAAA;AACM,OAAK,SAEN,KAAK,WAAW,WACnB,OAAO,KAAK,KAAK,MAAM,SAAA,GAEvB,OAAO,SAAS,OAAO,KAAK;;CAK9B,eAAuB,GAAW,GAAA;AACjC,OAAK,WAAW,GAAG,EAAA,EACnB,KAAK,WAAA,EAEL,KAAK,cACJ,IAAI,YAAY,kBAAkB;GACjC,QAAQ,EAAE,OAAO,KAAK,MAAA;GACtB,SAAA,CAAS;GACT,UAAA,CAAU;GAAA,CAAA,CAAA;;CAgCb,YAAoB,GAAA;AACnB,OAAK,UAAU,GACX,IACH,KAAK,aAAa,WAAW,GAAA,GAE7B,KAAK,gBAAgB,UAAA;;CAYvB,SAAA;EACC,IAAM,IAAgB,KAAK,eAAA,CAAgB,KAAK;AAEhD,SAAO,CAAI;;MAEP,IAAgB,EAAW;GAAE,QAAQ;GAAK,WAAW;GAAA,CAAA,GAAS,GAAA;+CACrB,IAAgB,mBAAmB,GAAA;aACrE,KAAK,YAAA;eACH,KAAK,cAAA;aACP,KAAK,YAAA;iBACD,KAAK,gBAAA;eACP,KAAK,cAAA;kBACF,KAAK,iBAAA;iBACN,EAAU,KAAK,UAAA,CAAA;oBACZ,KAAK,WAAW,SAAS,QAAA;;;;4GAIgE,IAErG,KAAK,UACJ,wDACA,sIAHD,YAAA;;;;MAOF,KAAK,eAAe,KAAK,QAAQ,SAChC,CAAI;;UAED,KAAK,QAAQ,KACd,MAAK,CAAI;;;0BAGQ,EAAE,EAAA,WAAa,EAAE,EAAA;;;;UAMpC,GAAA;;;;;;;;;;GA1ML,EAAS,EAAE,SAAA,CAAS,GAAA,CAAA,CAAA,EAAO,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAO3B,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,eAAA,KAAA,EAAA,EAAA,EAAA,CAO1C,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,YAAA,KAAA,EAAA,EAAA,EAAA,CAO1C,EAAS;CAAE,MAAM;CAAS,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,EAAA,CAM1C,GAAA,CAAA,EAAU,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAMV,GAAA,CAAA,EAAU,EAAA,WAAA,UAAA,KAAA,EAAA,EAAA,EAAA,CAMV,EAAS,EAAE,WAAW,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAM/B,EAAS,EAAE,WAAW,cAAA,CAAA,CAAA,EAAe,EAAA,WAAA,aAAA,KAAA,EAAA,EAAA,EAAA,CAIrC,GAAA,CAAA,EAAO,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,EAAA,CACP,GAAA,CAAA,EAAO,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAjJR,EAAc,gBAAA,CAAA,EAAgB,EAAA;ACEhB,IAAA,IAAA,cAAkC,EAAgB,CAAG;;;;;;CAMnE,SAAA;AACC,SAAO,CAAI;;;AAAA,IAAA,EAAA,CARZ,EAAc,wBAAA,CAAA,EAAwB,EAAA;ACCxB,IAAA,IAAA,cAAgC,EAAgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA+CnD,IAAA,KAAA,MAG8C,WAAA,KAAA,MAG9C;;CAEd,SAAA;AAGC,SAAO,KAAK,MACT,CAAI,aAAa,KAAK,IAAA,SAAa,KAAK,IAAA,QACxC,CAAI;;;AAAA,EAAA,CAdP,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,OAAA,KAAA,EAAA,EAAA,EAAA,CAGzC,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,OAAA,KAAA,EAAA,EAAA,EAAA,CAGzC,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,OAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CArD3B,EAAc,sBAAA,CAAA,EAAsB,EAAA"}

package/dist/card.cjs

@@ -1,2 +1 @@
-"use strict";require("./media-CS8HpKnK.cjs");
-//# sourceMappingURL=card.cjs.map
+require(`./card-Csvu8UJ9.cjs`);

package/dist/card.js

@@ -1,2 +1 @@
-import "./media-DtWbcRxL.js";
-//# sourceMappingURL=card.js.map
+import "./card-DM_miKMd.js";