@mhmo91/schmancy 0.9.28 → 0.10.2

package/dist/surface.mixin-DqMwoddO.js

@@ -1,320 +0,0 @@
-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 };

package/dist/surface.mixin-DqMwoddO.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"surface.mixin-DqMwoddO.js","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":";;;AAWA,IA4Ta,IAAgB,CAAG;GA5TC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqNH,CAAG;;;;;;;;;;;;GAgBA,CAAG;;;;;;;;;;;;;;;;;;;;GAyBD,CAAG;;;;;;;;;;;;;;;;;;;;;;GA0BH,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCxP5B,KAAmD,MAAA;CAC/D,MAAM,UAA0B,EAAA;EAAA,YAAA,GAAA,GAAA;AAAA,SAAA,GAAA,EAAA,EAAA,KAAA,OAiBH,QAAA,KAAA,UAOM,QAAA,KAAA,YAOI,GAAA,KAAA,OAOhB,UAAA,KAAA,YAAA,CAOV;;EAxCZ,OAAA,eAAgC,GAAA;AAI/B,UAAO,CAAA,GAFe,EAA4C,eAAe,EAAA,EAExD,EAAA;;;AAsC3B,QAAA,EAAA,CA/BE,EAAS;EAAE,MAAM;EAAQ,SAAA,CAAS;EAAA,CAAA,CAAA,EAAO,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAOzC,EAAS,EAAE,SAAA,CAAS,GAAA,CAAA,CAAA,EAAO,EAAA,WAAA,WAAA,KAAA,EAAA,EAAA,EAAA,CAO3B,EAAS;EAAE,MAAM;EAAQ,SAAA,CAAS;EAAA,CAAA,CAAA,EAAO,EAAA,WAAA,aAAA,KAAA,EAAA,EAAA,EAAA,CAOzC,EAAS,EAAE,SAAA,CAAS,GAAA,CAAA,CAAA,EAAO,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAO3B,EAAS;EAAE,MAAM;EAAS,SAAA,CAAS;EAAA,CAAA,CAAA,EAAO,EAAA,WAAA,aAAA,KAAA,EAAA,EAGrC;;AAAA,SAAA"}

package/dist/surface.mixin-DxOi-xo0.cjs

@@ -1,297 +0,0 @@
-require(`./chunk-CncqDLb2.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}});