@mhmo91/schmancy 0.10.41 → 0.10.43

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,146 +130,12 @@ 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
-	   ================================================================ */
-`
-
-/**
- * Surface rounded corner styles
- */
-export const surfaceRoundedStyles = 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);
-	}
-`
-
-/**
- * Luminous glow elevation — replaces M3 dark drop shadows with primary-colored glow.
- * No ::after tint overlay — depth comes from glow intensity, not surface tint.
- */
-export const surfaceElevationStyles = 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;
-	}
-`
-
-/**
- * Surface clickable styles - luminous hover, spring active
- */
-export const surfaceClickableStyles = 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);
-	}
-	:host([clickable]:active) {
-		filter: brightness(0.96);
-		transform: scale(0.98);
-		transition-duration: 100ms;
-	}
-	:host([clickable]:focus-visible) {
-		outline: 2px solid var(--schmancy-sys-color-primary-default);
-		outline-offset: 2px;
-	}
-	@media (prefers-reduced-motion: reduce) {
-		:host([clickable]) { transition: filter 150ms ease; }
-		:host([clickable]:hover) { transform: none; box-shadow: none; }
-		:host([clickable]:active) { transform: none; }
-	}
 `
 
 /**
- * Combined surface styles - includes all surface styling capabilities
+ * Combined surface styles — type variants only.
+ * Corner radius, shadow, and cursor are stock Tailwind classes applied by the consumer.
  */
 export const surfaceStyles = css`
 	${surfaceTypeStyles}
-	${surfaceRoundedStyles}
-	${surfaceElevationStyles}
-	${surfaceClickableStyles}
 `

package/src/surface/surface.ts

@@ -7,34 +7,36 @@ import { customElement, property } from 'lit/decorators.js'
 
 export const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')
 
-export type { SchmancySurfaceRounded, SchmancySurfaceElevation } from '@mixins/surface.mixin'
-
 /**
  * `<schmancy-surface>` component
  *
- * Styled container that supports rounding, elevation, and background/text color variants.
- * Sizing is the consumer's responsibility — use Tailwind utilities (`class="w-full h-full"`)
- * on the element directly.
+ * Color-variant container that paints a background and establishes the inherited
+ * text color for descendants. Corner radius, shadow depth, and cursor behavior
+ * are the consumer's responsibility — apply stock Tailwind classes directly on
+ * the element.
  *
- * SurfaceMixin automatically provides surfaceStyles CSS.
+ * Sizing is the consumer's responsibility — use Tailwind utilities
+ * (`class="w-full h-full"`) on the element directly.
  *
  * @element schmancy-surface
  * @slot - Default slot for projecting child content.
  *
  * @example
- * <schmancy-surface class="w-full h-full" rounded="all" elevation="3" type="surfaceBright" scroller>
- *   <p>Your scrollable content here</p>
+ * <schmancy-surface type="surfaceBright" class="rounded-2xl shadow-lg w-full">
+ *   <p>Content here</p>
  * </schmancy-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'

package/src/table/row.ts

@@ -45,10 +45,7 @@ export class SchmancyTableRow<T extends Record<string, any> = any> extends Schma
 	render(): TemplateResult {
 		return html`
 			<schmancy-list-item class="w-full">
-				<div
-					class="grid items-center gap-4"
-					style=${this.styleMap({ gridTemplateColumns: this.cols })}
-				>
+				<div class="grid items-center gap-4" style=${this.styleMap({ gridTemplateColumns: this.cols })}>
 					${this.columns.map(column => this.renderCell(column))}
 				</div>
 			</schmancy-list-item>

package/src/table/table.ts

@@ -196,11 +196,8 @@ export class SchmancyDataTable<T extends Record<string, any> = any> extends Schm
 			'cursor-pointer gap-1': this.sortable && column.sortable !== false && column.key,
 		})
 		return html`
-			<div
-				class="grid h-full w-full"
-				style="grid-template-columns: 1fr; grid-template-rows: auto 1fr;"
-			>
-				<schmancy-surface rounded="top" elevation="1" type="glass" class="sticky top-0 z-10">
+			<div class="grid h-full w-full" style="grid-template-columns: 1fr; grid-template-rows: auto 1fr;">
+				<schmancy-surface type="container" class="rounded-t-2xl shadow-sm sticky top-0 z-10">
 					<div
 						class="grid items-center gap-4 px-4 py-3"
 						style=${this.styleMap({

package/src/tabs/index.ts

@@ -1,2 +1,2 @@
-export * from './tab';
-export * from './tabs-group';
+export * from './tab'
+export * from './tabs-group'

package/src/tabs/tabs-group.ts

@@ -13,12 +13,14 @@ import SchmancyTab from './tab'
  */
 @customElement('schmancy-tab-group')
 export default class SchmancyTabGroup extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-		height: 100%;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: block;
+				height: 100%;
+			}
+		`,
+	]
 	@provide({ context: SchmancyTabsModeContext })
 	@property({ type: String })
 	mode: TSchmancyTabsMode = 'tabs'

package/src/teleport/index.ts

@@ -1,2 +1,2 @@
-export * from './teleport.component';
-export * from './teleport.service';
+export * from './teleport.component'
+export * from './teleport.service'

package/src/test-utils/a11y.ts

@@ -26,9 +26,7 @@ export async function expectNoA11yViolations(
 ): Promise<Result[]> {
 	const results = await axe.run(context, options)
 	if (results.violations.length > 0) {
-		const summary = results.violations
-			.map(v => `  • ${v.id} (${v.impact}): ${v.help}\n    ${v.helpUrl}`)
-			.join('\n')
+		const summary = results.violations.map(v => `  • ${v.id} (${v.impact}): ${v.help}\n    ${v.helpUrl}`).join('\n')
 		expect.fail(`axe-core found ${results.violations.length} a11y violation(s):\n${summary}`)
 	}
 	return results.violations

package/src/theme/index.ts

@@ -1,17 +1,17 @@
-/**
- * Material Design 3 Theme System for Schmancy
- * Core theme system with essential exports
- *
- * @module @schmancy/theme
- */
-
-// Essential theme exports
-export * from './theme.interface'
-export * from './theme.format'
-export * from './theme.service'
-export * from './theme.component'
-export * from './theme-controller'
-export * from './theme-controller-boat'
-export * from './theme.events'
-export * from './context'
-export * from './theme-audio-player'
+/**
+ * Material Design 3 Theme System for Schmancy
+ * Core theme system with essential exports
+ *
+ * @module @schmancy/theme
+ */
+
+// Essential theme exports
+export * from './theme.interface'
+export * from './theme.format'
+export * from './theme.service'
+export * from './theme.component'
+export * from './theme-controller'
+export * from './theme-controller-boat'
+export * from './theme.events'
+export * from './context'
+export * from './theme-audio-player'

package/src/theme/theme-audio-player.ts

@@ -60,11 +60,13 @@ declare global {
  */
 @customElement('schmancy-theme-audio-player')
 export class SchmancyThemeAudioPlayer extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-	}
-`]
+	static styles = [
+		css`
+			:host {
+				display: block;
+			}
+		`,
+	]
 
 	/** Current theme color */
 	@state() private currentColor: string = '#6200ee'
@@ -134,12 +136,12 @@ export class SchmancyThemeAudioPlayer extends SchmancyElement {
 									this.currentScheme = this.themeComponent.scheme
 									this.currentColor = this.themeComponent.color
 								}
-							})
+							}),
 						)
 					}
 					return of(null)
 				}),
-				takeUntil(this.disconnecting)
+				takeUntil(this.disconnecting),
 			)
 			.subscribe()
 
@@ -150,7 +152,7 @@ export class SchmancyThemeAudioPlayer extends SchmancyElement {
 				tap(text => {
 					this.moodText = text
 				}),
-				takeUntil(this.disconnecting)
+				takeUntil(this.disconnecting),
 			)
 			.subscribe()
 	}
@@ -179,7 +181,7 @@ export class SchmancyThemeAudioPlayer extends SchmancyElement {
 				moodText: this.moodText.trim(),
 				themeColor: this.currentColor,
 				scheme: this.currentScheme,
-			})
+			}),
 		)
 	}
 
@@ -352,7 +354,7 @@ export class SchmancyThemeAudioPlayer extends SchmancyElement {
 								<schmancy-icon class="text-base">refresh</schmancy-icon>
 								Reset
 							</schmancy-button>
-						`
+						`,
 					)}
 				</div>
 
@@ -393,7 +395,7 @@ export class SchmancyThemeAudioPlayer extends SchmancyElement {
 						() => html`
 							<schmancy-icon>music_note</schmancy-icon>
 							<span class="ml-2">Generate Mood Sound</span>
-						`
+						`,
 					)}
 				</schmancy-button>
 
@@ -404,14 +406,14 @@ export class SchmancyThemeAudioPlayer extends SchmancyElement {
 						<schmancy-surface type="error" class="p-3 rounded-lg">
 							<schmancy-typography type="body" token="sm" class="text-error"> ${this.error} </schmancy-typography>
 						</schmancy-surface>
-					`
+					`,
 				)}
 
 				<!-- Generated Audio Info -->
 				${when(
 					this.audioSequence,
 					() => html`
-						<schmancy-surface type="subtle" rounded="all" class="p-4 space-y-3">
+						<schmancy-surface type="containerLow" class="rounded-2xl p-4 space-y-3">
 							<div class="flex items-center justify-between">
 								<div>
 									<schmancy-typography type="label" token="lg"> ${this.detectedMood} </schmancy-typography>
@@ -432,7 +434,7 @@ export class SchmancyThemeAudioPlayer extends SchmancyElement {
 											class="w-2 bg-primary rounded-full animate-pulse"
 											style="height: ${20 + i * 8}px; animation-delay: ${i * 0.1}s"
 										></div>
-									`
+									`,
 								)}
 								${this.audioSequence?.tones.map(
 									t => html`
@@ -440,7 +442,7 @@ export class SchmancyThemeAudioPlayer extends SchmancyElement {
 											class="w-1 bg-secondary rounded-full"
 											style="height: ${Math.min(32, t.frequency / 40)}px; opacity: ${0.5 + t.volume * 0.5}"
 										></div>
-									`
+									`,
 								)}
 							</div>
 
@@ -458,7 +460,7 @@ export class SchmancyThemeAudioPlayer extends SchmancyElement {
 								<schmancy-icon class="opacity-50">volume_up</schmancy-icon>
 							</div>
 						</schmancy-surface>
-					`
+					`,
 				)}
 			</div>
 		`

package/src/theme/theme-controller-boat.ts

@@ -46,4 +46,4 @@ declare global {
 	interface HTMLElementTagNameMap {
 		'schmancy-theme-controller-boat': SchmancyThemeControllerBoat
 	}
-}
+}

package/src/theme/theme-controller.ts

@@ -71,39 +71,43 @@ export class SchmancyThemeController extends SchmancyElement {
 		super.connectedCallback()
 
 		// Discover the nearest theme component
-		this.discover<SchmancyThemeComponent>('schmancy-theme').pipe(
-			switchMap(theme => {
-				if (theme) {
-					this.themeComponent = theme
-					// Set initial values from discovered theme
-					this.currentScheme = theme.scheme
-					this.currentColor = theme.color
-
-					// Watch for theme property changes
-					return new Subject().pipe(
-						tap(() => {
-							if (this.themeComponent) {
-								this.currentScheme = this.themeComponent.scheme
-								this.currentColor = this.themeComponent.color
-							}
-						})
-					)
-				}
-				return of(null)
-			}),
-			takeUntil(this.disconnecting)
-		).subscribe()
+		this.discover<SchmancyThemeComponent>('schmancy-theme')
+			.pipe(
+				switchMap(theme => {
+					if (theme) {
+						this.themeComponent = theme
+						// Set initial values from discovered theme
+						this.currentScheme = theme.scheme
+						this.currentColor = theme.color
+
+						// Watch for theme property changes
+						return new Subject().pipe(
+							tap(() => {
+								if (this.themeComponent) {
+									this.currentScheme = this.themeComponent.scheme
+									this.currentColor = this.themeComponent.color
+								}
+							}),
+						)
+					}
+					return of(null)
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 
 		// Debounced color input
-		this.colorInput$.pipe(
-			debounceTime(150),
-			tap(color => {
-				if (this.themeComponent) {
-					this.themeComponent.color = color
-				}
-			}),
-			takeUntil(this.disconnecting)
-		).subscribe()
+		this.colorInput$
+			.pipe(
+				debounceTime(150),
+				tap(color => {
+					if (this.themeComponent) {
+						this.themeComponent.color = color
+					}
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 	}
 
 	protected setScheme(scheme: 'dark' | 'light' | 'auto') {
@@ -202,4 +206,4 @@ declare global {
 	interface HTMLElementTagNameMap {
 		'schmancy-theme-controller': SchmancyThemeController
 	}
-}
+}