@mhmo91/schmancy 0.9.4 → 0.9.6

package/dist/surface.mixin-CSKqQH-0.cjs

@@ -0,0 +1,297 @@
+require(`./chunk-BCfY8kxB.cjs`);const e=require(`./decorate-F9CuyeHg.cjs`);let t=require(`lit/decorators.js`),n=require(`lit`);var r=n.css`
+	/* ================================================================
+	   STRUCTURAL TYPES — All-glass depth model.
+	   Nothing is opaque. Every layer is translucent.
+	   Blur creates readability. Light borders isolate layers.
+	   Rule: text must ALWAYS be readable on every surface.
+	   ================================================================ */
+
+	/* Solid — dense glass, high readability ground layer (no blur — 92% opacity is enough) */
+	:host([type='solid']) {
+		--glass-base: var(--schmancy-sys-color-surface-lowest);
+		--glass-tint: var(--schmancy-sys-color-surface-on);
+		background: color-mix(in srgb, var(--glass-base) 92%, transparent);
+		color: var(--schmancy-sys-color-surface-on);
+		border: 1px solid color-mix(in srgb, var(--glass-tint) 4%, transparent);
+	}
+
+	/* Subtle — frosted glass, clearly readable */
+	:host([type='subtle']) {
+		--glass-base: var(--schmancy-sys-color-surface-container);
+		--glass-tint: var(--schmancy-sys-color-surface-on);
+		background: color-mix(in srgb, var(--glass-base) 78%, transparent);
+		backdrop-filter: blur(8px) saturate(130%);
+		-webkit-backdrop-filter: blur(8px) saturate(130%);
+		color: var(--schmancy-sys-color-surface-on);
+		border: 1px solid color-mix(in srgb, var(--glass-tint) 7%, transparent);
+		box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-tint) 5%, transparent);
+	}
+
+	/* Glass — frosted glass, blur ensures readability */
+	:host([type='glass']) {
+		--glass-base: var(--schmancy-sys-color-surface-lowest);
+		--glass-tint: var(--schmancy-sys-color-surface-on);
+		--glass-border: color-mix(in srgb, var(--glass-tint) 10%, transparent);
+		--glass-border-highlight: color-mix(in srgb, var(--glass-tint) 18%, transparent);
+
+		background: color-mix(in srgb, var(--glass-base) 55%, transparent);
+		backdrop-filter: blur(16px) saturate(180%) brightness(1.05);
+		-webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.05);
+		color: var(--schmancy-sys-color-surface-on);
+		border: 1px solid var(--glass-border);
+		border-top-color: var(--glass-border-highlight);
+		border-left-color: var(--glass-border-highlight);
+		box-shadow:
+			0 4px 24px color-mix(in srgb, black 10%, transparent),
+			inset 0 1px 0 color-mix(in srgb, var(--glass-tint) 8%, transparent),
+			inset 0 -1px 0 color-mix(in srgb, black 3%, transparent);
+		contain: content;
+		position: relative;
+		overflow: hidden;
+		isolation: isolate;
+	}
+
+	/* Luminous — glass + glow halo, heavy blur keeps readability */
+	:host([type='luminous']) {
+		--glass-base: var(--schmancy-sys-color-surface-lowest);
+		--glass-tint: var(--schmancy-sys-color-surface-on);
+		--glow-color: var(--schmancy-sys-color-primary-default);
+		--glass-border: color-mix(in srgb, var(--glass-tint) 12%, transparent);
+		--glass-border-highlight: color-mix(in srgb, var(--glass-tint) 22%, transparent);
+
+		background: color-mix(in srgb, var(--glass-base) 42%, transparent);
+		backdrop-filter: blur(20px) saturate(200%) brightness(1.08);
+		-webkit-backdrop-filter: blur(20px) saturate(200%) brightness(1.08);
+		color: var(--schmancy-sys-color-surface-on);
+		border: 1px solid var(--glass-border);
+		border-top-color: var(--glass-border-highlight);
+		border-left-color: var(--glass-border-highlight);
+		box-shadow:
+			0 8px 40px -4px color-mix(in srgb, var(--glow-color) 20%, transparent),
+			0 2px 16px color-mix(in srgb, black 8%, transparent),
+			inset 0 1px 0 color-mix(in srgb, var(--glass-tint) 10%, transparent);
+		contain: content;
+		position: relative;
+		overflow: hidden;
+		isolation: isolate;
+	}
+
+	/* ================================================================
+	   UTILITY TYPES
+	   ================================================================ */
+
+	/* Transparent — no background */
+	:host([type='transparent']) {
+		background-color: transparent;
+		color: var(--schmancy-sys-color-surface-on);
+	}
+
+	/* Outlined — border with luminous hover potential */
+	:host([type='outlined']) {
+		background-color: transparent;
+		color: var(--schmancy-sys-color-surface-on);
+		border: 1px solid var(--schmancy-sys-color-outlineVariant);
+		transition: border-color 300ms ease, box-shadow 300ms ease;
+	}
+
+	/* ================================================================
+	   SEMANTIC TYPES — tinted glass for status/role
+	   ================================================================ */
+
+	:host([type='primary']) {
+		background: color-mix(in srgb, var(--schmancy-sys-color-primary-default) 12%, transparent);
+		backdrop-filter: blur(4px) saturate(140%);
+		-webkit-backdrop-filter: blur(4px) saturate(140%);
+		color: var(--schmancy-sys-color-primary-default);
+		border: 1px solid color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);
+	}
+	:host([type='secondary']) {
+		background: color-mix(in srgb, var(--schmancy-sys-color-secondary-default) 12%, transparent);
+		backdrop-filter: blur(4px) saturate(140%);
+		-webkit-backdrop-filter: blur(4px) saturate(140%);
+		color: var(--schmancy-sys-color-secondary-default);
+		border: 1px solid color-mix(in srgb, var(--schmancy-sys-color-secondary-default) 20%, transparent);
+	}
+	:host([type='tertiary']) {
+		background: color-mix(in srgb, var(--schmancy-sys-color-tertiary-default) 12%, transparent);
+		backdrop-filter: blur(4px) saturate(140%);
+		-webkit-backdrop-filter: blur(4px) saturate(140%);
+		color: var(--schmancy-sys-color-tertiary-default);
+		border: 1px solid color-mix(in srgb, var(--schmancy-sys-color-tertiary-default) 20%, transparent);
+	}
+	:host([type='error']) {
+		background: color-mix(in srgb, var(--schmancy-sys-color-error-default) 12%, transparent);
+		backdrop-filter: blur(4px) saturate(140%);
+		-webkit-backdrop-filter: blur(4px) saturate(140%);
+		color: var(--schmancy-sys-color-error-onContainer);
+		border: 1px solid color-mix(in srgb, var(--schmancy-sys-color-error-default) 25%, transparent);
+	}
+	:host([type='success']) {
+		background: color-mix(in srgb, var(--schmancy-sys-color-success-default) 12%, transparent);
+		backdrop-filter: blur(4px) saturate(140%);
+		-webkit-backdrop-filter: blur(4px) saturate(140%);
+		color: var(--schmancy-sys-color-success-onContainer);
+		border: 1px solid color-mix(in srgb, var(--schmancy-sys-color-success-default) 25%, transparent);
+	}
+	:host([type='warning']) {
+		background: color-mix(in srgb, var(--schmancy-sys-color-warning-default) 12%, transparent);
+		backdrop-filter: blur(4px) saturate(140%);
+		-webkit-backdrop-filter: blur(4px) saturate(140%);
+		color: var(--schmancy-sys-color-warning-onContainer);
+		border: 1px solid color-mix(in srgb, var(--schmancy-sys-color-warning-default) 25%, transparent);
+	}
+	:host([type='info']) {
+		background: color-mix(in srgb, var(--schmancy-sys-color-info-default) 12%, transparent);
+		backdrop-filter: blur(4px) saturate(140%);
+		-webkit-backdrop-filter: blur(4px) saturate(140%);
+		color: var(--schmancy-sys-color-info-onContainer);
+		border: 1px solid color-mix(in srgb, var(--schmancy-sys-color-info-default) 25%, transparent);
+	}
+
+	/* ================================================================
+	   LEGACY M3 ALIASES — backward compatibility
+	   Old type names render as their new Luminous Glass equivalents.
+	   ================================================================ */
+
+	/* solid aliases — dense glass */
+	:host([type='surface']),
+	:host([type='surfaceDim']),
+	:host([type='surfaceBright']),
+	:host([type='containerLowest']) {
+		--glass-base: var(--schmancy-sys-color-surface-lowest);
+		--glass-tint: var(--schmancy-sys-color-surface-on);
+		background: color-mix(in srgb, var(--glass-base) 92%, transparent);
+		color: var(--schmancy-sys-color-surface-on);
+		border: 1px solid color-mix(in srgb, var(--glass-tint) 4%, transparent);
+	}
+
+	/* subtle aliases — frosted glass */
+	:host([type='containerLow']),
+	:host([type='container']) {
+		--glass-base: var(--schmancy-sys-color-surface-container);
+		--glass-tint: var(--schmancy-sys-color-surface-on);
+		background: color-mix(in srgb, var(--glass-base) 78%, transparent);
+		backdrop-filter: blur(8px) saturate(130%);
+		-webkit-backdrop-filter: blur(8px) saturate(130%);
+		color: var(--schmancy-sys-color-surface-on);
+		border: 1px solid color-mix(in srgb, var(--glass-tint) 7%, transparent);
+		box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-tint) 5%, transparent);
+	}
+
+	/* glass aliases */
+	:host([type='containerHigh']),
+	:host([type='containerHighest']),
+	:host([type='glassOforim']) {
+		--glass-base: var(--schmancy-sys-color-surface-lowest);
+		--glass-tint: var(--schmancy-sys-color-surface-on);
+		--glass-border: color-mix(in srgb, var(--glass-tint) 10%, transparent);
+		--glass-border-highlight: color-mix(in srgb, var(--glass-tint) 18%, transparent);
+
+		background: color-mix(in srgb, var(--glass-base) 55%, transparent);
+		backdrop-filter: blur(16px) saturate(180%) brightness(1.05);
+		-webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.05);
+		color: var(--schmancy-sys-color-surface-on);
+		border: 1px solid var(--glass-border);
+		border-top-color: var(--glass-border-highlight);
+		border-left-color: var(--glass-border-highlight);
+		box-shadow:
+			0 4px 24px color-mix(in srgb, black 10%, transparent),
+			inset 0 1px 0 color-mix(in srgb, var(--glass-tint) 8%, transparent),
+			inset 0 -1px 0 color-mix(in srgb, black 3%, transparent);
+		position: relative;
+		overflow: hidden;
+		isolation: isolate;
+	}
+
+	/* ================================================================
+	   REDUCED MOTION — disable glass animations
+	   ================================================================ */
+`,i=n.css`
+	:host([fill='all']) {
+		height: 100%;
+		width: 100%;
+	}
+	:host([fill='width']) {
+		width: 100%;
+	}
+	:host([fill='height']) {
+		height: 100%;
+	}
+`,a=n.css`
+	:host([rounded='none']) {
+		border-radius: 0;
+	}
+	:host([rounded='top']) {
+		border-radius: var(--schmancy-sys-shape-corner-large) var(--schmancy-sys-shape-corner-large) 0 0;
+	}
+	:host([rounded='left']) {
+		border-radius: var(--schmancy-sys-shape-corner-large) 0 0 var(--schmancy-sys-shape-corner-large);
+	}
+	:host([rounded='right']) {
+		border-radius: 0 var(--schmancy-sys-shape-corner-large) var(--schmancy-sys-shape-corner-large) 0;
+	}
+	:host([rounded='bottom']) {
+		border-radius: 0 0 var(--schmancy-sys-shape-corner-large) var(--schmancy-sys-shape-corner-large);
+	}
+	:host([rounded='all']) {
+		border-radius: var(--schmancy-sys-shape-corner-large);
+	}
+`,o=n.css`
+	:host([elevation='1']) {
+		box-shadow: 0 2px 12px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);
+		position: relative;
+	}
+	:host([elevation='2']) {
+		box-shadow: 0 4px 20px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 22%, transparent);
+		position: relative;
+	}
+	:host([elevation='3']) {
+		box-shadow: 0 8px 32px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 28%, transparent);
+		position: relative;
+	}
+	:host([elevation='4']) {
+		box-shadow: 0 12px 44px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 35%, transparent);
+		position: relative;
+	}
+	:host([elevation='5']) {
+		box-shadow: 0 20px 60px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 42%, transparent);
+		position: relative;
+	}
+`,s=n.css`
+	:host([clickable]) {
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		transition:
+			filter 200ms ease,
+			transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
+			box-shadow 400ms ease;
+	}
+	:host([clickable]:hover) {
+		filter: brightness(1.03);
+		transform: translateY(-1px);
+		box-shadow: 0 4px 20px -6px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);
+	}
+	:host([clickable]:active) {
+		filter: brightness(0.96);
+		transform: scale(0.97);
+		box-shadow: none;
+		transition-duration: 100ms;
+	}
+	:host([clickable]:focus-visible) {
+		outline: 2px solid var(--schmancy-sys-color-primary-default);
+		outline-offset: 2px;
+		box-shadow: 0 0 12px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		:host([clickable]) { transition: filter 150ms ease; }
+		:host([clickable]:hover) { transform: none; box-shadow: none; }
+		:host([clickable]:active) { transform: none; }
+	}
+`,c=n.css`
+	${r}
+	${i}
+	${a}
+	${o}
+	${s}
+`,l=n=>{class r extends n{constructor(...e){super(...e),this.fill=`auto`,this.rounded=`none`,this.elevation=0,this.type=`subtle`,this.clickable=!1}static finalizeStyles(e){return[...n.finalizeStyles(e),c]}}return e.t([(0,t.property)({type:String,reflect:!0})],r.prototype,`fill`,void 0),e.t([(0,t.property)({reflect:!0})],r.prototype,`rounded`,void 0),e.t([(0,t.property)({type:Number,reflect:!0})],r.prototype,`elevation`,void 0),e.t([(0,t.property)({reflect:!0})],r.prototype,`type`,void 0),e.t([(0,t.property)({type:Boolean,reflect:!0})],r.prototype,`clickable`,void 0),r};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return l}});

package/dist/surface.mixin-CSKqQH-0.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.mixin-CSKqQH-0.cjs","names":[],"sources":["../src/surface/surface.styles.ts","../mixins/surface.mixin.ts"],"sourcesContent":["import { css } from 'lit'\n\n/**\n * Luminous Glass surface type styles.\n *\n * Depth model: blur intensity + opacity replaces M3 tonal hierarchy.\n * - solid:    opaque ground (0 blur, 100% opacity)\n * - subtle:   frosted panel (4px blur, ~72% opacity)\n * - glass:    full frosted glass (20px blur, ~55% opacity)\n * - luminous: glass + glow halo (24px blur, ~22% opacity)\n */\nexport const surfaceTypeStyles = css`\n\t/* ================================================================\n\t   STRUCTURAL TYPES — All-glass depth model.\n\t   Nothing is opaque. Every layer is translucent.\n\t   Blur creates readability. Light borders isolate layers.\n\t   Rule: text must ALWAYS be readable on every surface.\n\t   ================================================================ */\n\n\t/* Solid — dense glass, high readability ground layer (no blur — 92% opacity is enough) */\n\t:host([type='solid']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-lowest);\n\t\t--glass-tint: var(--schmancy-sys-color-surface-on);\n\t\tbackground: color-mix(in srgb, var(--glass-base) 92%, transparent);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid color-mix(in srgb, var(--glass-tint) 4%, transparent);\n\t}\n\n\t/* Subtle — frosted glass, clearly readable */\n\t:host([type='subtle']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-container);\n\t\t--glass-tint: var(--schmancy-sys-color-surface-on);\n\t\tbackground: color-mix(in srgb, var(--glass-base) 78%, transparent);\n\t\tbackdrop-filter: blur(8px) saturate(130%);\n\t\t-webkit-backdrop-filter: blur(8px) saturate(130%);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid color-mix(in srgb, var(--glass-tint) 7%, transparent);\n\t\tbox-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-tint) 5%, transparent);\n\t}\n\n\t/* Glass — frosted glass, blur ensures readability */\n\t:host([type='glass']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-lowest);\n\t\t--glass-tint: var(--schmancy-sys-color-surface-on);\n\t\t--glass-border: color-mix(in srgb, var(--glass-tint) 10%, transparent);\n\t\t--glass-border-highlight: color-mix(in srgb, var(--glass-tint) 18%, transparent);\n\n\t\tbackground: color-mix(in srgb, var(--glass-base) 55%, transparent);\n\t\tbackdrop-filter: blur(16px) saturate(180%) brightness(1.05);\n\t\t-webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.05);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid var(--glass-border);\n\t\tborder-top-color: var(--glass-border-highlight);\n\t\tborder-left-color: var(--glass-border-highlight);\n\t\tbox-shadow:\n\t\t\t0 4px 24px color-mix(in srgb, black 10%, transparent),\n\t\t\tinset 0 1px 0 color-mix(in srgb, var(--glass-tint) 8%, transparent),\n\t\t\tinset 0 -1px 0 color-mix(in srgb, black 3%, transparent);\n\t\tcontain: content;\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tisolation: isolate;\n\t}\n\n\t/* Luminous — glass + glow halo, heavy blur keeps readability */\n\t:host([type='luminous']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-lowest);\n\t\t--glass-tint: var(--schmancy-sys-color-surface-on);\n\t\t--glow-color: var(--schmancy-sys-color-primary-default);\n\t\t--glass-border: color-mix(in srgb, var(--glass-tint) 12%, transparent);\n\t\t--glass-border-highlight: color-mix(in srgb, var(--glass-tint) 22%, transparent);\n\n\t\tbackground: color-mix(in srgb, var(--glass-base) 42%, transparent);\n\t\tbackdrop-filter: blur(20px) saturate(200%) brightness(1.08);\n\t\t-webkit-backdrop-filter: blur(20px) saturate(200%) brightness(1.08);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid var(--glass-border);\n\t\tborder-top-color: var(--glass-border-highlight);\n\t\tborder-left-color: var(--glass-border-highlight);\n\t\tbox-shadow:\n\t\t\t0 8px 40px -4px color-mix(in srgb, var(--glow-color) 20%, transparent),\n\t\t\t0 2px 16px color-mix(in srgb, black 8%, transparent),\n\t\t\tinset 0 1px 0 color-mix(in srgb, var(--glass-tint) 10%, transparent);\n\t\tcontain: content;\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tisolation: isolate;\n\t}\n\n\t/* ================================================================\n\t   UTILITY TYPES\n\t   ================================================================ */\n\n\t/* Transparent — no background */\n\t:host([type='transparent']) {\n\t\tbackground-color: transparent;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\n\t/* Outlined — border with luminous hover potential */\n\t:host([type='outlined']) {\n\t\tbackground-color: transparent;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid var(--schmancy-sys-color-outlineVariant);\n\t\ttransition: border-color 300ms ease, box-shadow 300ms ease;\n\t}\n\n\t/* ================================================================\n\t   SEMANTIC TYPES — tinted glass for status/role\n\t   ================================================================ */\n\n\t:host([type='primary']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-primary-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-primary-default);\n\t\tborder: 1px solid color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);\n\t}\n\t:host([type='secondary']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-secondary-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-secondary-default);\n\t\tborder: 1px solid color-mix(in srgb, var(--schmancy-sys-color-secondary-default) 20%, transparent);\n\t}\n\t:host([type='tertiary']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-tertiary-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-tertiary-default);\n\t\tborder: 1px solid color-mix(in srgb, var(--schmancy-sys-color-tertiary-default) 20%, transparent);\n\t}\n\t:host([type='error']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-error-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-error-onContainer);\n\t\tborder: 1px solid color-mix(in srgb, var(--schmancy-sys-color-error-default) 25%, transparent);\n\t}\n\t:host([type='success']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-success-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-success-onContainer);\n\t\tborder: 1px solid color-mix(in srgb, var(--schmancy-sys-color-success-default) 25%, transparent);\n\t}\n\t:host([type='warning']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-warning-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-warning-onContainer);\n\t\tborder: 1px solid color-mix(in srgb, var(--schmancy-sys-color-warning-default) 25%, transparent);\n\t}\n\t:host([type='info']) {\n\t\tbackground: color-mix(in srgb, var(--schmancy-sys-color-info-default) 12%, transparent);\n\t\tbackdrop-filter: blur(4px) saturate(140%);\n\t\t-webkit-backdrop-filter: blur(4px) saturate(140%);\n\t\tcolor: var(--schmancy-sys-color-info-onContainer);\n\t\tborder: 1px solid color-mix(in srgb, var(--schmancy-sys-color-info-default) 25%, transparent);\n\t}\n\n\t/* ================================================================\n\t   LEGACY M3 ALIASES — backward compatibility\n\t   Old type names render as their new Luminous Glass equivalents.\n\t   ================================================================ */\n\n\t/* solid aliases — dense glass */\n\t:host([type='surface']),\n\t:host([type='surfaceDim']),\n\t:host([type='surfaceBright']),\n\t:host([type='containerLowest']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-lowest);\n\t\t--glass-tint: var(--schmancy-sys-color-surface-on);\n\t\tbackground: color-mix(in srgb, var(--glass-base) 92%, transparent);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid color-mix(in srgb, var(--glass-tint) 4%, transparent);\n\t}\n\n\t/* subtle aliases — frosted glass */\n\t:host([type='containerLow']),\n\t:host([type='container']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-container);\n\t\t--glass-tint: var(--schmancy-sys-color-surface-on);\n\t\tbackground: color-mix(in srgb, var(--glass-base) 78%, transparent);\n\t\tbackdrop-filter: blur(8px) saturate(130%);\n\t\t-webkit-backdrop-filter: blur(8px) saturate(130%);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid color-mix(in srgb, var(--glass-tint) 7%, transparent);\n\t\tbox-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-tint) 5%, transparent);\n\t}\n\n\t/* glass aliases */\n\t:host([type='containerHigh']),\n\t:host([type='containerHighest']),\n\t:host([type='glassOforim']) {\n\t\t--glass-base: var(--schmancy-sys-color-surface-lowest);\n\t\t--glass-tint: var(--schmancy-sys-color-surface-on);\n\t\t--glass-border: color-mix(in srgb, var(--glass-tint) 10%, transparent);\n\t\t--glass-border-highlight: color-mix(in srgb, var(--glass-tint) 18%, transparent);\n\n\t\tbackground: color-mix(in srgb, var(--glass-base) 55%, transparent);\n\t\tbackdrop-filter: blur(16px) saturate(180%) brightness(1.05);\n\t\t-webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.05);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid var(--glass-border);\n\t\tborder-top-color: var(--glass-border-highlight);\n\t\tborder-left-color: var(--glass-border-highlight);\n\t\tbox-shadow:\n\t\t\t0 4px 24px color-mix(in srgb, black 10%, transparent),\n\t\t\tinset 0 1px 0 color-mix(in srgb, var(--glass-tint) 8%, transparent),\n\t\t\tinset 0 -1px 0 color-mix(in srgb, black 3%, transparent);\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tisolation: isolate;\n\t}\n\n\t/* ================================================================\n\t   REDUCED MOTION — disable glass animations\n\t   ================================================================ */\n`\n\n/**\n * Surface fill styles - dimension control\n */\nexport const surfaceFillStyles = css`\n\t:host([fill='all']) {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t:host([fill='width']) {\n\t\twidth: 100%;\n\t}\n\t:host([fill='height']) {\n\t\theight: 100%;\n\t}\n`\n\n/**\n * Surface rounded corner styles\n */\nexport const surfaceRoundedStyles = css`\n\t:host([rounded='none']) {\n\t\tborder-radius: 0;\n\t}\n\t:host([rounded='top']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-large) var(--schmancy-sys-shape-corner-large) 0 0;\n\t}\n\t:host([rounded='left']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-large) 0 0 var(--schmancy-sys-shape-corner-large);\n\t}\n\t:host([rounded='right']) {\n\t\tborder-radius: 0 var(--schmancy-sys-shape-corner-large) var(--schmancy-sys-shape-corner-large) 0;\n\t}\n\t:host([rounded='bottom']) {\n\t\tborder-radius: 0 0 var(--schmancy-sys-shape-corner-large) var(--schmancy-sys-shape-corner-large);\n\t}\n\t:host([rounded='all']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-large);\n\t}\n`\n\n/**\n * Luminous glow elevation — replaces M3 dark drop shadows with primary-colored glow.\n * No ::after tint overlay — depth comes from glow intensity, not surface tint.\n */\nexport const surfaceElevationStyles = css`\n\t:host([elevation='1']) {\n\t\tbox-shadow: 0 2px 12px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);\n\t\tposition: relative;\n\t}\n\t:host([elevation='2']) {\n\t\tbox-shadow: 0 4px 20px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 22%, transparent);\n\t\tposition: relative;\n\t}\n\t:host([elevation='3']) {\n\t\tbox-shadow: 0 8px 32px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 28%, transparent);\n\t\tposition: relative;\n\t}\n\t:host([elevation='4']) {\n\t\tbox-shadow: 0 12px 44px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 35%, transparent);\n\t\tposition: relative;\n\t}\n\t:host([elevation='5']) {\n\t\tbox-shadow: 0 20px 60px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 42%, transparent);\n\t\tposition: relative;\n\t}\n`\n\n/**\n * Surface clickable styles - luminous hover, spring active\n */\nexport const surfaceClickableStyles = css`\n\t:host([clickable]) {\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\t\t-webkit-tap-highlight-color: transparent;\n\t\ttransition:\n\t\t\tfilter 200ms ease,\n\t\t\ttransform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),\n\t\t\tbox-shadow 400ms ease;\n\t}\n\t:host([clickable]:hover) {\n\t\tfilter: brightness(1.03);\n\t\ttransform: translateY(-1px);\n\t\tbox-shadow: 0 4px 20px -6px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);\n\t}\n\t:host([clickable]:active) {\n\t\tfilter: brightness(0.96);\n\t\ttransform: scale(0.97);\n\t\tbox-shadow: none;\n\t\ttransition-duration: 100ms;\n\t}\n\t:host([clickable]:focus-visible) {\n\t\toutline: 2px solid var(--schmancy-sys-color-primary-default);\n\t\toutline-offset: 2px;\n\t\tbox-shadow: 0 0 12px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host([clickable]) { transition: filter 150ms ease; }\n\t\t:host([clickable]:hover) { transform: none; box-shadow: none; }\n\t\t:host([clickable]:active) { transform: none; }\n\t}\n`\n\n/**\n * Combined surface styles - includes all surface styling capabilities\n */\nexport const surfaceStyles = css`\n\t${surfaceTypeStyles}\n\t${surfaceFillStyles}\n\t${surfaceRoundedStyles}\n\t${surfaceElevationStyles}\n\t${surfaceClickableStyles}\n`\n","import type { Constructor } from './constructor'\nimport { CSSResultGroup, CSSResultOrNative, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport type { TSurfaceColor } from '../src/types/surface'\nimport { surfaceStyles } from '../src/surface/surface.styles'\n\nexport type SchmancySurfaceFill = 'all' | 'width' | 'height' | 'auto'\nexport type SchmancySurfaceRounded = 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all'\nexport type SchmancySurfaceElevation = 0 | 1 | 2 | 3 | 4 | 5\n\nexport declare class ISurfaceMixin {\n\tfill: SchmancySurfaceFill\n\trounded: SchmancySurfaceRounded\n\televation: SchmancySurfaceElevation\n\ttype: TSurfaceColor\n\tclickable: boolean\n}\n\n/**\n * SurfaceMixin - Adds surface styling properties AND styles to any LitElement\n *\n * Uses Lit's finalizeStyles hook to inject surfaceStyles CSS for all surface type selectors.\n * This is the recommended pattern for mixins that need to add styles.\n *\n * Provides these reflected properties:\n * - `fill`: 'all' | 'width' | 'height' | 'auto' - Controls element dimensions\n * - `rounded`: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' - Corner rounding\n * - `elevation`: 0-5 - Shadow depth level\n * - `type`: TSurfaceColor - Surface color variant (26+ options)\n *\n * Usage:\n * ```typescript\n * import { SurfaceMixin } from '@mixins/surface.mixin'\n *\n * @customElement('my-component')\n * class MyComponent extends SurfaceMixin(TailwindElement(css`\n *   :host { display: block; }\n * `)) {\n *   // Component now has type, fill, rounded, elevation properties\n *   // AND surfaceStyles are automatically included\n * }\n * ```\n */\nexport const SurfaceMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n\tclass SurfaceMixinClass extends superClass {\n\t\t/**\n\t\t * Override finalizeStyles to inject surfaceStyles.\n\t\t * This is the Lit-recommended way for mixins to add styles.\n\t\t */\n\t\tprotected static finalizeStyles(styles?: CSSResultGroup): CSSResultOrNative[] {\n\t\t\t// Get parent's finalized styles using LitElement's method\n\t\t\tconst parentStyles = (superClass as unknown as typeof LitElement).finalizeStyles(styles)\n\t\t\t// Append surfaceStyles at the end (higher specificity)\n\t\t\treturn [...parentStyles, surfaceStyles as CSSResultOrNative]\n\t\t}\n\n\t\t/**\n\t\t * Fill the width and/or height of the parent container.\n\t\t * @default 'auto'\n\t\t */\n\t\t@property({ type: String, reflect: true })\n\t\tfill: SchmancySurfaceFill = 'auto'\n\n\t\t/**\n\t\t * Specifies the rounding style of the component's corners.\n\t\t * @default 'none'\n\t\t */\n\t\t@property({ reflect: true })\n\t\trounded: SchmancySurfaceRounded = 'none'\n\n\t\t/**\n\t\t * Defines the elevation level (shadow depth) of the surface.\n\t\t * @default 0\n\t\t */\n\t\t@property({ type: Number, reflect: true })\n\t\televation: SchmancySurfaceElevation = 0\n\n\t\t/**\n\t\t * Specifies the surface type for styling.\n\t\t * @default 'container'\n\t\t */\n\t\t@property({ reflect: true })\n\t\ttype: TSurfaceColor = 'subtle'\n\n\t\t/**\n\t\t * Makes the surface interactive with hover, active states and cursor pointer.\n\t\t * @default false\n\t\t */\n\t\t@property({ type: Boolean, reflect: true })\n\t\tclickable = false\n\t}\n\treturn SurfaceMixinClass as Constructor<ISurfaceMixin> & T\n}\n"],"mappings":"+HAWA,IAAa,EAAoB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqNvB,EAAoB,EAAA,GAAG;;;;;;;;;;;EAgBvB,EAAuB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;EAyB1B,EAAyB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;EA0B5B,EAAyB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoC5B,EAAgB,EAAA,GAAG;GAC7B,EAAA;GACA,EAAA;GACA,EAAA;GACA,EAAA;GACA,EAAA;ECjSU,EAAmD,GAAA,CAC/D,MAAM,UAA0B,CAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,EAAA,CAAA,KAAA,KAiBH,OAAA,KAAA,QAOM,OAAA,KAAA,UAOI,EAAA,KAAA,KAOhB,SAAA,KAAA,UAAA,CAOV,EAxCZ,OAAA,eAAgC,EAAA,CAI/B,MAAO,CAAA,GAFe,EAA4C,eAAe,EAAA,CAExD,EAAA,EAsC3B,OAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UA/BW,CAAE,KAAM,OAAQ,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAOhC,CAAE,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,UAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAOlB,CAAE,KAAM,OAAQ,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,YAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAOhC,CAAE,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAOlB,CAAE,KAAM,QAAS,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,YAAA,IAAA,GAAA,CAGrC,GAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}

package/dist/surface.mixin-DqMwoddO.js

@@ -0,0 +1,320 @@
+import { t as e } from "./decorate-D_utPUsC.js";
+import { property as t } from "lit/decorators.js";
+import { css as n } from "lit";
+var r = n`
+	${n`
+	/* ================================================================
+	   STRUCTURAL TYPES — All-glass depth model.
+	   Nothing is opaque. Every layer is translucent.
+	   Blur creates readability. Light borders isolate layers.
+	   Rule: text must ALWAYS be readable on every surface.
+	   ================================================================ */
+
+	/* Solid — dense glass, high readability ground layer (no blur — 92% opacity is enough) */
+	:host([type='solid']) {
+		--glass-base: var(--schmancy-sys-color-surface-lowest);
+		--glass-tint: var(--schmancy-sys-color-surface-on);
+		background: color-mix(in srgb, var(--glass-base) 92%, transparent);
+		color: var(--schmancy-sys-color-surface-on);
+		border: 1px solid color-mix(in srgb, var(--glass-tint) 4%, transparent);
+	}
+
+	/* Subtle — frosted glass, clearly readable */
+	:host([type='subtle']) {
+		--glass-base: var(--schmancy-sys-color-surface-container);
+		--glass-tint: var(--schmancy-sys-color-surface-on);
+		background: color-mix(in srgb, var(--glass-base) 78%, transparent);
+		backdrop-filter: blur(8px) saturate(130%);
+		-webkit-backdrop-filter: blur(8px) saturate(130%);
+		color: var(--schmancy-sys-color-surface-on);
+		border: 1px solid color-mix(in srgb, var(--glass-tint) 7%, transparent);
+		box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-tint) 5%, transparent);
+	}
+
+	/* Glass — frosted glass, blur ensures readability */
+	:host([type='glass']) {
+		--glass-base: var(--schmancy-sys-color-surface-lowest);
+		--glass-tint: var(--schmancy-sys-color-surface-on);
+		--glass-border: color-mix(in srgb, var(--glass-tint) 10%, transparent);
+		--glass-border-highlight: color-mix(in srgb, var(--glass-tint) 18%, transparent);
+
+		background: color-mix(in srgb, var(--glass-base) 55%, transparent);
+		backdrop-filter: blur(16px) saturate(180%) brightness(1.05);
+		-webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.05);
+		color: var(--schmancy-sys-color-surface-on);
+		border: 1px solid var(--glass-border);
+		border-top-color: var(--glass-border-highlight);
+		border-left-color: var(--glass-border-highlight);
+		box-shadow:
+			0 4px 24px color-mix(in srgb, black 10%, transparent),
+			inset 0 1px 0 color-mix(in srgb, var(--glass-tint) 8%, transparent),
+			inset 0 -1px 0 color-mix(in srgb, black 3%, transparent);
+		contain: content;
+		position: relative;
+		overflow: hidden;
+		isolation: isolate;
+	}
+
+	/* Luminous — glass + glow halo, heavy blur keeps readability */
+	:host([type='luminous']) {
+		--glass-base: var(--schmancy-sys-color-surface-lowest);
+		--glass-tint: var(--schmancy-sys-color-surface-on);
+		--glow-color: var(--schmancy-sys-color-primary-default);
+		--glass-border: color-mix(in srgb, var(--glass-tint) 12%, transparent);
+		--glass-border-highlight: color-mix(in srgb, var(--glass-tint) 22%, transparent);
+
+		background: color-mix(in srgb, var(--glass-base) 42%, transparent);
+		backdrop-filter: blur(20px) saturate(200%) brightness(1.08);
+		-webkit-backdrop-filter: blur(20px) saturate(200%) brightness(1.08);
+		color: var(--schmancy-sys-color-surface-on);
+		border: 1px solid var(--glass-border);
+		border-top-color: var(--glass-border-highlight);
+		border-left-color: var(--glass-border-highlight);
+		box-shadow:
+			0 8px 40px -4px color-mix(in srgb, var(--glow-color) 20%, transparent),
+			0 2px 16px color-mix(in srgb, black 8%, transparent),
+			inset 0 1px 0 color-mix(in srgb, var(--glass-tint) 10%, transparent);
+		contain: content;
+		position: relative;
+		overflow: hidden;
+		isolation: isolate;
+	}
+
+	/* ================================================================
+	   UTILITY TYPES
+	   ================================================================ */
+
+	/* Transparent — no background */
+	:host([type='transparent']) {
+		background-color: transparent;
+		color: var(--schmancy-sys-color-surface-on);
+	}
+
+	/* Outlined — border with luminous hover potential */
+	:host([type='outlined']) {
+		background-color: transparent;
+		color: var(--schmancy-sys-color-surface-on);
+		border: 1px solid var(--schmancy-sys-color-outlineVariant);
+		transition: border-color 300ms ease, box-shadow 300ms ease;
+	}
+
+	/* ================================================================
+	   SEMANTIC TYPES — tinted glass for status/role
+	   ================================================================ */
+
+	:host([type='primary']) {
+		background: color-mix(in srgb, var(--schmancy-sys-color-primary-default) 12%, transparent);
+		backdrop-filter: blur(4px) saturate(140%);
+		-webkit-backdrop-filter: blur(4px) saturate(140%);
+		color: var(--schmancy-sys-color-primary-default);
+		border: 1px solid color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);
+	}
+	:host([type='secondary']) {
+		background: color-mix(in srgb, var(--schmancy-sys-color-secondary-default) 12%, transparent);
+		backdrop-filter: blur(4px) saturate(140%);
+		-webkit-backdrop-filter: blur(4px) saturate(140%);
+		color: var(--schmancy-sys-color-secondary-default);
+		border: 1px solid color-mix(in srgb, var(--schmancy-sys-color-secondary-default) 20%, transparent);
+	}
+	:host([type='tertiary']) {
+		background: color-mix(in srgb, var(--schmancy-sys-color-tertiary-default) 12%, transparent);
+		backdrop-filter: blur(4px) saturate(140%);
+		-webkit-backdrop-filter: blur(4px) saturate(140%);
+		color: var(--schmancy-sys-color-tertiary-default);
+		border: 1px solid color-mix(in srgb, var(--schmancy-sys-color-tertiary-default) 20%, transparent);
+	}
+	:host([type='error']) {
+		background: color-mix(in srgb, var(--schmancy-sys-color-error-default) 12%, transparent);
+		backdrop-filter: blur(4px) saturate(140%);
+		-webkit-backdrop-filter: blur(4px) saturate(140%);
+		color: var(--schmancy-sys-color-error-onContainer);
+		border: 1px solid color-mix(in srgb, var(--schmancy-sys-color-error-default) 25%, transparent);
+	}
+	:host([type='success']) {
+		background: color-mix(in srgb, var(--schmancy-sys-color-success-default) 12%, transparent);
+		backdrop-filter: blur(4px) saturate(140%);
+		-webkit-backdrop-filter: blur(4px) saturate(140%);
+		color: var(--schmancy-sys-color-success-onContainer);
+		border: 1px solid color-mix(in srgb, var(--schmancy-sys-color-success-default) 25%, transparent);
+	}
+	:host([type='warning']) {
+		background: color-mix(in srgb, var(--schmancy-sys-color-warning-default) 12%, transparent);
+		backdrop-filter: blur(4px) saturate(140%);
+		-webkit-backdrop-filter: blur(4px) saturate(140%);
+		color: var(--schmancy-sys-color-warning-onContainer);
+		border: 1px solid color-mix(in srgb, var(--schmancy-sys-color-warning-default) 25%, transparent);
+	}
+	:host([type='info']) {
+		background: color-mix(in srgb, var(--schmancy-sys-color-info-default) 12%, transparent);
+		backdrop-filter: blur(4px) saturate(140%);
+		-webkit-backdrop-filter: blur(4px) saturate(140%);
+		color: var(--schmancy-sys-color-info-onContainer);
+		border: 1px solid color-mix(in srgb, var(--schmancy-sys-color-info-default) 25%, transparent);
+	}
+
+	/* ================================================================
+	   LEGACY M3 ALIASES — backward compatibility
+	   Old type names render as their new Luminous Glass equivalents.
+	   ================================================================ */
+
+	/* solid aliases — dense glass */
+	:host([type='surface']),
+	:host([type='surfaceDim']),
+	:host([type='surfaceBright']),
+	:host([type='containerLowest']) {
+		--glass-base: var(--schmancy-sys-color-surface-lowest);
+		--glass-tint: var(--schmancy-sys-color-surface-on);
+		background: color-mix(in srgb, var(--glass-base) 92%, transparent);
+		color: var(--schmancy-sys-color-surface-on);
+		border: 1px solid color-mix(in srgb, var(--glass-tint) 4%, transparent);
+	}
+
+	/* subtle aliases — frosted glass */
+	:host([type='containerLow']),
+	:host([type='container']) {
+		--glass-base: var(--schmancy-sys-color-surface-container);
+		--glass-tint: var(--schmancy-sys-color-surface-on);
+		background: color-mix(in srgb, var(--glass-base) 78%, transparent);
+		backdrop-filter: blur(8px) saturate(130%);
+		-webkit-backdrop-filter: blur(8px) saturate(130%);
+		color: var(--schmancy-sys-color-surface-on);
+		border: 1px solid color-mix(in srgb, var(--glass-tint) 7%, transparent);
+		box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-tint) 5%, transparent);
+	}
+
+	/* glass aliases */
+	:host([type='containerHigh']),
+	:host([type='containerHighest']),
+	:host([type='glassOforim']) {
+		--glass-base: var(--schmancy-sys-color-surface-lowest);
+		--glass-tint: var(--schmancy-sys-color-surface-on);
+		--glass-border: color-mix(in srgb, var(--glass-tint) 10%, transparent);
+		--glass-border-highlight: color-mix(in srgb, var(--glass-tint) 18%, transparent);
+
+		background: color-mix(in srgb, var(--glass-base) 55%, transparent);
+		backdrop-filter: blur(16px) saturate(180%) brightness(1.05);
+		-webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.05);
+		color: var(--schmancy-sys-color-surface-on);
+		border: 1px solid var(--glass-border);
+		border-top-color: var(--glass-border-highlight);
+		border-left-color: var(--glass-border-highlight);
+		box-shadow:
+			0 4px 24px color-mix(in srgb, black 10%, transparent),
+			inset 0 1px 0 color-mix(in srgb, var(--glass-tint) 8%, transparent),
+			inset 0 -1px 0 color-mix(in srgb, black 3%, transparent);
+		position: relative;
+		overflow: hidden;
+		isolation: isolate;
+	}
+
+	/* ================================================================
+	   REDUCED MOTION — disable glass animations
+	   ================================================================ */
+`}
+	${n`
+	:host([fill='all']) {
+		height: 100%;
+		width: 100%;
+	}
+	:host([fill='width']) {
+		width: 100%;
+	}
+	:host([fill='height']) {
+		height: 100%;
+	}
+`}
+	${n`
+	:host([rounded='none']) {
+		border-radius: 0;
+	}
+	:host([rounded='top']) {
+		border-radius: var(--schmancy-sys-shape-corner-large) var(--schmancy-sys-shape-corner-large) 0 0;
+	}
+	:host([rounded='left']) {
+		border-radius: var(--schmancy-sys-shape-corner-large) 0 0 var(--schmancy-sys-shape-corner-large);
+	}
+	:host([rounded='right']) {
+		border-radius: 0 var(--schmancy-sys-shape-corner-large) var(--schmancy-sys-shape-corner-large) 0;
+	}
+	:host([rounded='bottom']) {
+		border-radius: 0 0 var(--schmancy-sys-shape-corner-large) var(--schmancy-sys-shape-corner-large);
+	}
+	:host([rounded='all']) {
+		border-radius: var(--schmancy-sys-shape-corner-large);
+	}
+`}
+	${n`
+	:host([elevation='1']) {
+		box-shadow: 0 2px 12px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);
+		position: relative;
+	}
+	:host([elevation='2']) {
+		box-shadow: 0 4px 20px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 22%, transparent);
+		position: relative;
+	}
+	:host([elevation='3']) {
+		box-shadow: 0 8px 32px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 28%, transparent);
+		position: relative;
+	}
+	:host([elevation='4']) {
+		box-shadow: 0 12px 44px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 35%, transparent);
+		position: relative;
+	}
+	:host([elevation='5']) {
+		box-shadow: 0 20px 60px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 42%, transparent);
+		position: relative;
+	}
+`}
+	${n`
+	:host([clickable]) {
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		transition:
+			filter 200ms ease,
+			transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
+			box-shadow 400ms ease;
+	}
+	:host([clickable]:hover) {
+		filter: brightness(1.03);
+		transform: translateY(-1px);
+		box-shadow: 0 4px 20px -6px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);
+	}
+	:host([clickable]:active) {
+		filter: brightness(0.96);
+		transform: scale(0.97);
+		box-shadow: none;
+		transition-duration: 100ms;
+	}
+	:host([clickable]:focus-visible) {
+		outline: 2px solid var(--schmancy-sys-color-primary-default);
+		outline-offset: 2px;
+		box-shadow: 0 0 12px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		:host([clickable]) { transition: filter 150ms ease; }
+		:host([clickable]:hover) { transform: none; box-shadow: none; }
+		:host([clickable]:active) { transform: none; }
+	}
+`}
+`, i = (n) => {
+	class i extends n {
+		constructor(...e) {
+			super(...e), this.fill = "auto", this.rounded = "none", this.elevation = 0, this.type = "subtle", this.clickable = !1;
+		}
+		static finalizeStyles(e) {
+			return [...n.finalizeStyles(e), r];
+		}
+	}
+	return e([t({
+		type: String,
+		reflect: !0
+	})], i.prototype, "fill", void 0), e([t({ reflect: !0 })], i.prototype, "rounded", void 0), e([t({
+		type: Number,
+		reflect: !0
+	})], i.prototype, "elevation", void 0), e([t({ reflect: !0 })], i.prototype, "type", void 0), e([t({
+		type: Boolean,
+		reflect: !0
+	})], i.prototype, "clickable", void 0), i;
+};
+export { i as t };