@mhmo91/schmancy 0.10.42 → 0.10.43

package/src/state/schmancy-context.ts

@@ -11,11 +11,11 @@
 // connected. `disconnectedCallback` destroys all isolated copies; their
 // pending writes flush, their adapters close.
 
-import { type Context, ContextProvider, createContext } from '@lit/context';
-import { SchmancyElement } from '@mixins/SchmancyElement';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { _publishEventHost, stateContextKey } from './active-host';
+import { type Context, ContextProvider, createContext } from '@lit/context'
+import { SchmancyElement } from '@mixins/SchmancyElement'
+import { html } from 'lit'
+import { property } from 'lit/decorators.js'
+import { _publishEventHost, stateContextKey } from './active-host'
 
 // Curated set of DOM event types that descendants are likely to bind state-
 // mutating handlers to. The capture-phase listener publishes `this` as the
@@ -23,109 +23,109 @@ import { _publishEventHost, stateContextKey } from './active-host';
 // inline handlers (or any code reached during the synchronous chain) call a
 // state mutator can resolve back to the isolated copy this context provides.
 const EVENT_TYPES = [
-  'click',
-  'dblclick',
-  'submit',
-  'change',
-  'input',
-  'keydown',
-  'keyup',
-  'keypress',
-  'pointerdown',
-  'pointerup',
-  'mousedown',
-  'mouseup',
-  'focus',
-  'blur',
-  'paste',
-  'drop',
-] as const;
+	'click',
+	'dblclick',
+	'submit',
+	'change',
+	'input',
+	'keydown',
+	'keyup',
+	'keypress',
+	'pointerdown',
+	'pointerup',
+	'mousedown',
+	'mouseup',
+	'focus',
+	'blur',
+	'paste',
+	'drop',
+] as const
 
 /** Duck-typed view of what the `state()` factory hands out, restricted to the
  *  bits `<schmancy-context>` needs. Kept internal — consumers see the full
  *  `State<>` type and never refer to this. */
 export interface StateTemplate {
-  readonly namespace: string;
-  readonly value: unknown;
-  /** Internal hook the factory adds to every state instance. Builds a fresh
-   *  per-context copy seeded with the current value, sharing nothing with the
-   *  global instance. The returned object exposes `destroy()` so the context
-   *  element can flush + close on disconnect. */
-  isolatedInstance(): { destroy(): void } & Record<string | symbol, unknown>;
+	readonly namespace: string
+	readonly value: unknown
+	/** Internal hook the factory adds to every state instance. Builds a fresh
+	 *  per-context copy seeded with the current value, sharing nothing with the
+	 *  global instance. The returned object exposes `destroy()` so the context
+	 *  element can flush + close on disconnect. */
+	isolatedInstance(): { destroy(): void } & Record<string | symbol, unknown>
 }
 
 export class SchmancyContext extends SchmancyElement {
-  /** States to isolate under this subtree. Pass the same instances you import
-   *  at module scope (e.g. `provides={[cart, menu]}`). Outside this element
-   *  they continue to behave as module-scoped globals; descendants of this
-   *  element see a per-element isolated copy. */
-  @property({ attribute: false }) provides: readonly StateTemplate[] = [];
+	/** States to isolate under this subtree. Pass the same instances you import
+	 *  at module scope (e.g. `provides={[cart, menu]}`). Outside this element
+	 *  they continue to behave as module-scoped globals; descendants of this
+	 *  element see a per-element isolated copy. */
+	@property({ attribute: false }) provides: readonly StateTemplate[] = []
 
-  // Per-mount records. Keep both the provider (so we can release it on
-  // disconnect) and the isolated instance (so we can destroy it).
-  private scoped: Array<{
-    isolated: { destroy(): void };
-    provider: ContextProvider<Context<unknown, unknown>>;
-  }> = [];
+	// Per-mount records. Keep both the provider (so we can release it on
+	// disconnect) and the isolated instance (so we can destroy it).
+	private scoped: Array<{
+		isolated: { destroy(): void }
+		provider: ContextProvider<Context<unknown, unknown>>
+	}> = []
 
-  private publishEventTargetAsHost = (e: Event): void => {
-    // Publish the deepest event target (across shadow boundaries) rather
-    // than `this`. The downstream `ContextRequestEvent` will be dispatched
-    // from this host and must bubble up through `<schmancy-context>` to
-    // reach our `ContextProvider`. `@lit/context` skips self-registration
-    // (`consumerHost === this.host` ⇒ no-op), so dispatching from
-    // schmancy-context itself would silently fall back to the global.
-    const path = e.composedPath();
-    for (const node of path) {
-      if (node instanceof HTMLElement) {
-        _publishEventHost(node);
-        return;
-      }
-    }
-  };
+	private publishEventTargetAsHost = (e: Event): void => {
+		// Publish the deepest event target (across shadow boundaries) rather
+		// than `this`. The downstream `ContextRequestEvent` will be dispatched
+		// from this host and must bubble up through `<schmancy-context>` to
+		// reach our `ContextProvider`. `@lit/context` skips self-registration
+		// (`consumerHost === this.host` ⇒ no-op), so dispatching from
+		// schmancy-context itself would silently fall back to the global.
+		const path = e.composedPath()
+		for (const node of path) {
+			if (node instanceof HTMLElement) {
+				_publishEventHost(node)
+				return
+			}
+		}
+	}
 
-  override connectedCallback(): void {
-    super.connectedCallback();
-    for (const tmpl of this.provides) {
-      const isolated = tmpl.isolatedInstance();
-      const ctx = createContext<unknown>(stateContextKey(tmpl.namespace));
-      // ContextProvider auto-wires via the host's ReactiveControllerHost
-      // interface (LitElement satisfies it). It listens for
-      // `context-request` events and responds with `isolated` for any
-      // requester whose `event.context === ctx`.
-      const provider = new ContextProvider(this, { context: ctx, initialValue: isolated });
-      this.scoped.push({ isolated, provider });
-    }
-    for (const type of EVENT_TYPES) {
-      this.addEventListener(type, this.publishEventTargetAsHost, { capture: true });
-    }
-  }
+	override connectedCallback(): void {
+		super.connectedCallback()
+		for (const tmpl of this.provides) {
+			const isolated = tmpl.isolatedInstance()
+			const ctx = createContext<unknown>(stateContextKey(tmpl.namespace))
+			// ContextProvider auto-wires via the host's ReactiveControllerHost
+			// interface (LitElement satisfies it). It listens for
+			// `context-request` events and responds with `isolated` for any
+			// requester whose `event.context === ctx`.
+			const provider = new ContextProvider(this, { context: ctx, initialValue: isolated })
+			this.scoped.push({ isolated, provider })
+		}
+		for (const type of EVENT_TYPES) {
+			this.addEventListener(type, this.publishEventTargetAsHost, { capture: true })
+		}
+	}
 
-  override disconnectedCallback(): void {
-    for (const type of EVENT_TYPES) {
-      this.removeEventListener(type, this.publishEventTargetAsHost, { capture: true });
-    }
-    for (const entry of this.scoped) {
-      entry.isolated.destroy();
-    }
-    this.scoped = [];
-    super.disconnectedCallback();
-  }
+	override disconnectedCallback(): void {
+		for (const type of EVENT_TYPES) {
+			this.removeEventListener(type, this.publishEventTargetAsHost, { capture: true })
+		}
+		for (const entry of this.scoped) {
+			entry.isolated.destroy()
+		}
+		this.scoped = []
+		super.disconnectedCallback()
+	}
 
-  override render() {
-    return html`<slot></slot>`;
-  }
+	override render() {
+		return html`<slot></slot>`
+	}
 }
 
 // Imperative define so a second load (source + dist) is a no-op rather than
 // a throw — the registry is process-global; whichever class wins serves the
 // element identity for the page.
 if (!customElements.get('schmancy-context')) {
-  customElements.define('schmancy-context', SchmancyContext);
+	customElements.define('schmancy-context', SchmancyContext)
 }
 
 declare global {
-  interface HTMLElementTagNameMap {
-    'schmancy-context': SchmancyContext;
-  }
+	interface HTMLElementTagNameMap {
+		'schmancy-context': SchmancyContext
+	}
 }

package/src/state/state.test-d.ts

@@ -16,19 +16,11 @@
 // nullable-union dispatch directly; this file focuses on assertions
 // that hold under both strict and non-strict tsconfigs.
 
-import type {
-	AssertNovel,
-	FeatureNamespace,
-	IsAsync,
-	Kind,
-	ObjectAPI,
-	State,
-} from './index'
+import type { AssertNovel, FeatureNamespace, IsAsync, Kind, ObjectAPI, State } from './index'
 import { state } from './index'
 
 // --- Equality / assignability primitives ---------------------------------
-type Equal<X, Y> =
-	(<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? true : false
+type Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? true : false
 type Expect<T extends true> = T
 type Assignable<A, B> = A extends B ? true : false
 
@@ -166,9 +158,7 @@ type _assertNovelOnFresh = Expect<Equal<AssertNovel<'test-d/fresh'>, 'test-d/fre
 // =========================================================================
 // State<NS, T, S> alias smoke — verifies the conditional structure resolves.
 // =========================================================================
-type _syncMemoryState = Expect<
-	Assignable<State<'test-d/x', CartState, 'memory'>, { value: CartState }>
->
+type _syncMemoryState = Expect<Assignable<State<'test-d/x', CartState, 'memory'>, { value: CartState }>>
 type _asyncIdbState = Expect<Assignable<State<'test-d/x', CartState, 'indexeddb'>, AsyncDisposable>>
 
 // =========================================================================

package/src/state/state.test.ts

@@ -743,10 +743,7 @@ describe('<schmancy-context provides>', () => {
 			override render() {
 				return html`
 					<span data-test="v">${counter.value.n}</span>
-					<button
-						data-test="b"
-						@click=${() => counter.replace({ n: counter.value.n + 1 })}
-					></button>
+					<button data-test="b" @click=${() => counter.replace({ n: counter.value.n + 1 })}></button>
 				`
 			}
 		}

package/src/steps/index.ts

@@ -1,3 +1,3 @@
-export * from './schmancy-step';
-export * from './schmancy-steps';
-export * from './steps.context';
+export * from './schmancy-step'
+export * from './schmancy-steps'
+export * from './steps.context'

package/src/steps/schmancy-step.ts

@@ -8,12 +8,14 @@ import { StepsController, stepsContext } from './steps.context'
 
 @customElement('schmancy-step')
 export class SchmancyStep extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-		transition: all 0.2s ease-in-out;
-	}
-`]
+	static styles = [
+		css`
+			:host {
+				display: block;
+				transition: all 0.2s ease-in-out;
+			}
+		`,
+	]
 
 	/**
 	 * The step's position (1-based). This is used to compare against
@@ -47,12 +49,10 @@ export class SchmancyStep extends SchmancyElement {
 
 	connectedCallback() {
 		super.connectedCallback()
-		this.steps.currentStep$
-			.pipe(takeUntil(this.disconnecting))
-			.subscribe(step => {
-				this.currentStep = step
-				this.updateFlexProperties()
-			})
+		this.steps.currentStep$.pipe(takeUntil(this.disconnecting)).subscribe(step => {
+			this.currentStep = step
+			this.updateFlexProperties()
+		})
 	}
 
 	firstUpdated() {
@@ -112,8 +112,10 @@ export class SchmancyStep extends SchmancyElement {
 		const iconContainerClasses = {
 			'relative border-solid z-10 flex size-8 items-center justify-center rounded-full transition-all duration-200': true,
 			'bg-tertiary-default text-tertiary-on shadow-md group-hover:shadow-lg': isComplete,
-			'border-2 border-primary-default bg-primary-container text-primary-onContainer shadow-sm': !isComplete && isActive,
-			'border-2 border-outline bg-surface-default text-surface-onVariant group-hover:border-primary-default group-hover:bg-primary-container': isUpcoming,
+			'border-2 border-primary-default bg-primary-container text-primary-onContainer shadow-sm':
+				!isComplete && isActive,
+			'border-2 border-outline bg-surface-default text-surface-onVariant group-hover:border-primary-default group-hover:bg-primary-container':
+				isUpcoming,
 		}
 
 		const textClasses = {
@@ -127,7 +129,9 @@ export class SchmancyStep extends SchmancyElement {
 		return html`
 			<li class="relative">
 				<div
-					class="absolute top-8 left-3 sm:left-4 -ml-px w-0.5 transition-colors duration-200 ${this.classMap(connectorClasses)}"
+					class="absolute top-8 left-3 sm:left-4 -ml-px w-0.5 transition-colors duration-200 ${this.classMap(
+						connectorClasses,
+					)}"
 					style="height: calc(100% + var(--steps-gap, 0px))"
 					aria-hidden="true"
 				></div>
@@ -135,13 +139,20 @@ export class SchmancyStep extends SchmancyElement {
 				<button
 					type="button"
 					@click=${this.onStepClick}
-					class="relative flex items-center group transition-all duration-200 hover:scale-[1.02] ${clickableClass} ${isActive ? 'bg-primary-container/20 -mx-1 sm:-mx-2 px-1 sm:px-2 py-2 sm:py-3 rounded-lg' : 'py-1 sm:py-2'}"
+					class="relative flex items-center group transition-all duration-200 hover:scale-[1.02] ${clickableClass} ${isActive
+						? 'bg-primary-container/20 -mx-1 sm:-mx-2 px-1 sm:px-2 py-2 sm:py-3 rounded-lg'
+						: 'py-1 sm:py-2'}"
 				>
 					<span class="flex items-center h-10 sm:h-12">
 						<span class=${this.classMap(iconContainerClasses)}>
 							${isComplete
 								? html`
-										<svg class="size-5 transition-transform duration-200 group-hover:scale-110" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+										<svg
+											class="size-5 transition-transform duration-200 group-hover:scale-110"
+											viewBox="0 0 20 20"
+											fill="currentColor"
+											aria-hidden="true"
+										>
 											<path
 												fill-rule="evenodd"
 												d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
@@ -167,7 +178,12 @@ export class SchmancyStep extends SchmancyElement {
 							this.description,
 							() => html`
 								<schmancy-typography type="body" token="sm" class="mt-0.5 sm:mt-1">
-									<span class="text-surface-onVariant transition-colors duration-200 ${isActive ? 'text-primary-onContainer' : ''}">${this.description}</span>
+									<span
+										class="text-surface-onVariant transition-colors duration-200 ${isActive
+											? 'text-primary-onContainer'
+											: ''}"
+										>${this.description}</span
+									>
 								</schmancy-typography>
 							`,
 						)}
@@ -189,11 +205,7 @@ export class SchmancyStep extends SchmancyElement {
 
 	private renderRailRow(isActive: boolean, isComplete: boolean, _isUpcoming: boolean, navigable: boolean) {
 		const isLast = !this.nextElementSibling?.matches('schmancy-step')
-		const labelClass = isActive
-			? 'text-primary-default'
-			: isComplete
-				? 'text-surface-on'
-				: 'text-surface-on-variant'
+		const labelClass = isActive ? 'text-primary-default' : isComplete ? 'text-surface-on' : 'text-surface-on-variant'
 
 		const dotClass = [
 			'relative z-10 w-3 h-3 rounded-full shrink-0 transition-colors duration-300',
@@ -203,11 +215,9 @@ export class SchmancyStep extends SchmancyElement {
 
 		return html`
 			<div
-				class="relative flex items-center gap-4 rounded-lg -mx-2 px-2 py-3 transition-colors duration-200 ${
-					navigable
-						? 'cursor-pointer hover:bg-primary-default/8 focus-visible:ring-2 focus-visible:ring-primary-default'
-						: ''
-				}"
+				class="relative flex items-center gap-4 rounded-lg -mx-2 px-2 py-3 transition-colors duration-200 ${navigable
+					? 'cursor-pointer hover:bg-primary-default/8 focus-visible:ring-2 focus-visible:ring-primary-default'
+					: ''}"
 				role=${navigable ? 'button' : 'presentation'}
 				tabindex=${navigable ? '0' : '-1'}
 				aria-current=${isActive ? 'step' : 'false'}
@@ -219,9 +229,9 @@ export class SchmancyStep extends SchmancyElement {
 					!isLast,
 					() => html`
 						<div
-							class="absolute left-3.5 top-1/2 w-px h-full transition-colors duration-300 ${
-								isComplete ? 'bg-primary-default' : 'bg-outline'
-							}"
+							class="absolute left-3.5 top-1/2 w-px h-full transition-colors duration-300 ${isComplete
+								? 'bg-primary-default'
+								: 'bg-outline'}"
 							aria-hidden="true"
 						></div>
 					`,

package/src/steps/schmancy-steps.ts

@@ -14,11 +14,13 @@ export type SchmancyStepsChangeEvent = CustomEvent<{ value: number }>
 
 @customElement('schmancy-steps')
 export class SchmancySteps extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-	}
-`]
+	static styles = [
+		css`
+			:host {
+				display: block;
+			}
+		`,
+	]
 
 	private controller = new StepsController()
 

package/src/surface/index.ts

@@ -1 +1 @@
-export * from './surface';
+export * from './surface'

package/src/surface/surface.styles.ts

@@ -1,71 +1,67 @@
 import { css } from 'lit'
 
 /**
- * Luminous Glass surface type styles.
+ * Surface type styles — tonal depth model.
  *
- * Depth model: blur intensity + opacity replaces M3 tonal hierarchy.
- * - solid:    opaque ground (0 blur, 100% opacity)
- * - subtle:   frosted panel (4px blur, ~72% opacity)
- * - glass:    full frosted glass (20px blur, ~55% opacity)
- * - luminous: glass + glow halo (24px blur, ~22% opacity)
+ * Constants (single source of truth):
+ *   --glass-material: blur(16px) saturate(180%)
+ *   --glass-opacity:  72%
+ *
+ * Rationale: `blur(16px) saturate(180%)` is the `glass` recipe's
+ * blur+saturate pair — the readable mid-point. Opacity is raised to 72%
+ * (from the prior `glass` recipe's 55%) so that lighter tonal levels
+ * (`surface`, `surfaceDim`, `surfaceBright`) satisfy the M3 contained-text
+ * readability contract: at 72% the base tint is dominant enough that the
+ * lighter tones still carry readable foreground text across light and dark
+ * schemes. Darker tones (`container`…`containerHighest`) gain a slight
+ * opacity boost for free — no readability regression there.
  */
 export const surfaceTypeStyles = 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.
+	   TONAL TYPES — constant glass material, per-name base tint.
+	   Depth is expressed by tone (the M3 tonal token), not by blur.
 	   ================================================================ */
 
-	/* 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);
+	:host([type='surface']) {
+		--glass-base: var(--schmancy-sys-color-surface-default);
 	}
-
-	/* Subtle — bright vibrant glass: near-white tint, saturated blur, top-edge highlight */
-	:host([type='subtle']) {
-		--glass-base: var(--schmancy-sys-color-surface-lowest);
-		--glass-tint: var(--schmancy-sys-color-surface-on);
-		background: color-mix(in srgb, var(--glass-base) 30%, transparent);
-		backdrop-filter: blur(12px) saturate(160%);
-		-webkit-backdrop-filter: blur(12px) saturate(160%);
-		border: 1px solid color-mix(in srgb, var(--schmancy-sys-color-outlineVariant) 60%, transparent);
-		box-shadow: inset 0 1px 0 color-mix(in srgb, var(--schmancy-sys-color-surface-on) 8%, transparent);
-		color: var(--schmancy-sys-color-surface-on);
+	:host([type='surfaceDim']) {
+		--glass-base: var(--schmancy-sys-color-surface-dim);
 	}
-
-	/* 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);
-
-		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);
-		contain: content;
-		position: relative;
-		overflow: hidden;
-		isolation: isolate;
+	:host([type='surfaceBright']) {
+		--glass-base: var(--schmancy-sys-color-surface-bright);
+	}
+	:host([type='containerLowest']) {
+		--glass-base: var(--schmancy-sys-color-surface-containerLowest);
+	}
+	:host([type='containerLow']) {
+		--glass-base: var(--schmancy-sys-color-surface-containerLow);
+	}
+	:host([type='container']) {
+		--glass-base: var(--schmancy-sys-color-surface-container);
+	}
+	:host([type='containerHigh']) {
+		--glass-base: var(--schmancy-sys-color-surface-containerHigh);
+	}
+	:host([type='containerHighest']) {
+		--glass-base: var(--schmancy-sys-color-surface-containerHighest);
 	}
 
-	/* 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);
-
-		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);
+	/* One shared material rule — applies to all eight tonal names */
+	:host([type='surface']),
+	:host([type='surfaceDim']),
+	:host([type='surfaceBright']),
+	:host([type='containerLowest']),
+	:host([type='containerLow']),
+	:host([type='container']),
+	:host([type='containerHigh']),
+	:host([type='containerHighest']) {
+		--glass-material: blur(16px) saturate(180%);
+		--glass-opacity: 72%;
+		background: color-mix(in srgb, var(--glass-base) var(--glass-opacity), transparent);
+		backdrop-filter: var(--glass-material);
+		-webkit-backdrop-filter: var(--glass-material);
 		color: var(--schmancy-sys-color-surface-on);
-		contain: content;
-		position: relative;
-		overflow: hidden;
-		isolation: isolate;
 	}
 
 	/* ================================================================
@@ -83,7 +79,9 @@ export const surfaceTypeStyles = css`
 		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;
+		transition:
+			border-color 300ms ease,
+			box-shadow 300ms ease;
 	}
 
 	/* ================================================================
@@ -132,55 +130,6 @@ export const surfaceTypeStyles = css`
 		-webkit-backdrop-filter: blur(4px) saturate(140%);
 		color: var(--schmancy-sys-color-info-onContainer);
 	}
-
-	/* ================================================================
-	   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);
-	}
-
-	/* subtle aliases — bright vibrant glass */
-	:host([type='containerLow']),
-	:host([type='container']) {
-		--glass-base: var(--schmancy-sys-color-surface-lowest);
-		--glass-tint: var(--schmancy-sys-color-surface-on);
-		background: color-mix(in srgb, var(--glass-base) 30%, transparent);
-		backdrop-filter: blur(12px) saturate(160%);
-		-webkit-backdrop-filter: blur(12px) saturate(160%);
-		border: 1px solid color-mix(in srgb, var(--schmancy-sys-color-outlineVariant) 60%, transparent);
-		box-shadow: inset 0 1px 0 color-mix(in srgb, var(--schmancy-sys-color-surface-on) 8%, transparent);
-		color: var(--schmancy-sys-color-surface-on);
-	}
-
-	/* 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);
-
-		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);
-		position: relative;
-		overflow: hidden;
-		isolation: isolate;
-	}
-
-	/* ================================================================
-	   REDUCED MOTION — disable glass animations
-	   ================================================================ */
 `
 
 /**

package/src/surface/surface.ts

@@ -28,13 +28,15 @@ export const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface'
  */
 @customElement('schmancy-surface')
 export class SchmancySurface extends SurfaceMixin(SchmancyElement) {
-	static styles = [css`
-		:host {
-			display: block;
-			box-sizing: border-box;
-			overflow: visible;
-		}
-	`];
+	static styles = [
+		css`
+			:host {
+				display: block;
+				box-sizing: border-box;
+				overflow: visible;
+			}
+		`,
+	]
 	/**
 	 * Specifies the surface type for styling.
 	 * Provided to descendant components via context.
@@ -42,7 +44,7 @@ export class SchmancySurface extends SurfaceMixin(SchmancyElement) {
 	 */
 	@provide({ context: SchmancySurfaceTypeContext })
 	@property({ reflect: true })
-	override type: TSurfaceColor = 'subtle'
+	override type: TSurfaceColor = 'containerLow'
 
 	protected render(): unknown {
 		return html`<slot></slot>`

package/src/table/index.ts

@@ -1,2 +1,2 @@
-export * from './row';
-export * from './table';
+export * from './row'
+export * from './table'