@mhmo91/schmancy 0.10.42 → 0.10.44

package/src/theme/theme.style.css

@@ -471,8 +471,6 @@
 	--animate-aurora-drift: aurora-drift 30s ease-in-out infinite;
 	--animate-scene-enter: scene-enter 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 
-
-
 	/* Color System */
 	--md-sys-color-scrim: var(--schmancy-sys-color-scrim);
 	--md-sys-color-outline: var(--schmancy-sys-color-outline);
@@ -585,39 +583,96 @@
 	}
 }
 @keyframes float-drift {
-	0%, 100% { transform: translate(0, 0) rotate(0deg); }
-	25% { transform: translate(20px, -30px) rotate(2deg); }
-	50% { transform: translate(-10px, -50px) rotate(-1deg); }
-	75% { transform: translate(15px, -20px) rotate(1deg); }
+	0%,
+	100% {
+		transform: translate(0, 0) rotate(0deg);
+	}
+	25% {
+		transform: translate(20px, -30px) rotate(2deg);
+	}
+	50% {
+		transform: translate(-10px, -50px) rotate(-1deg);
+	}
+	75% {
+		transform: translate(15px, -20px) rotate(1deg);
+	}
 }
 @keyframes float-drift-alt {
-	0%, 100% { transform: translate(0, 0) rotate(0deg); }
-	25% { transform: translate(-25px, 20px) rotate(-2deg); }
-	50% { transform: translate(15px, 40px) rotate(1deg); }
-	75% { transform: translate(-20px, 15px) rotate(-1deg); }
+	0%,
+	100% {
+		transform: translate(0, 0) rotate(0deg);
+	}
+	25% {
+		transform: translate(-25px, 20px) rotate(-2deg);
+	}
+	50% {
+		transform: translate(15px, 40px) rotate(1deg);
+	}
+	75% {
+		transform: translate(-20px, 15px) rotate(-1deg);
+	}
 }
 @keyframes pulse-glow {
-	0%, 100% { opacity: 0.15; transform: scale(1); }
-	50% { opacity: 0.25; transform: scale(1.05); }
+	0%,
+	100% {
+		opacity: 0.15;
+		transform: scale(1);
+	}
+	50% {
+		opacity: 0.25;
+		transform: scale(1.05);
+	}
 }
 @keyframes slow-spin {
-	from { transform: rotate(0deg); }
-	to { transform: rotate(360deg); }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
 }
 @keyframes aurora-drift {
-	0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
-	33% { transform: translate(3%, -5%) scale(1.05) rotate(1deg); }
-	66% { transform: translate(-3%, 3%) scale(0.95) rotate(-1deg); }
+	0%,
+	100% {
+		transform: translate(0, 0) scale(1) rotate(0deg);
+	}
+	33% {
+		transform: translate(3%, -5%) scale(1.05) rotate(1deg);
+	}
+	66% {
+		transform: translate(-3%, 3%) scale(0.95) rotate(-1deg);
+	}
 }
 @keyframes scene-enter {
-	from { opacity: 0; transform: scale(0.92); filter: blur(12px); }
-	to { opacity: 1; transform: scale(1); filter: blur(0px); }
+	from {
+		opacity: 0;
+		transform: scale(0.92);
+		filter: blur(12px);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+		filter: blur(0px);
+	}
 }
 @keyframes star-appear {
-	from { opacity: 0; transform: scale(0.5); }
-	to { opacity: 1; transform: scale(1); }
+	from {
+		opacity: 0;
+		transform: scale(0.5);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
 }
 @keyframes star-twinkle {
-	0%, 100% { opacity: 1; transform: scale(1); }
-	50% { opacity: 0.4; transform: scale(0.92); }
+	0%,
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+	50% {
+		opacity: 0.4;
+		transform: scale(0.92);
+	}
 }

package/src/theme-button/index.ts

@@ -1 +1 @@
-export * from './theme-button';
+export * from './theme-button'

package/src/tooltip/tooltip.directive.ts

@@ -168,7 +168,7 @@ class TooltipDirective extends Directive {
 					if (e.key === 'Escape' && tooltipData?.tooltipElement.style.opacity === '1') {
 						hideTooltip()
 					}
-				})
+				}),
 			]
 
 			// Store subscriptions for cleanup

package/src/tree/index.ts

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

package/src/tree/tree.ts

@@ -10,20 +10,22 @@ import { fromEvent, merge, switchMap, takeUntil, tap, zip } from 'rxjs'
  */
 @customElement('schmancy-tree')
 export class SchmancyTree extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-		position: relative;
-		background-color: initial;
-	}
-	::slotted([slot='root']) {
-		width: 100%;
-		text-align: left;
-	}
-	::slotted([slot='root'] + *) {
-		margin-top: 0.5rem;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: block;
+				position: relative;
+				background-color: initial;
+			}
+			::slotted([slot='root']) {
+				width: 100%;
+				text-align: left;
+			}
+			::slotted([slot='root'] + *) {
+				margin-top: 0.5rem;
+			}
+		`,
+	]
 	/**
 	 * Whether the tree’s children are visible
 	 */
@@ -36,11 +38,17 @@ export class SchmancyTree extends SchmancyElement {
 	@query('#chevron') chevron!: HTMLElement
 
 	private readonly a11yId = `schmancy-tree-${Math.random().toString(36).slice(2, 10)}`
-	private get contentId() { return `${this.a11yId}-content` }
+	private get contentId() {
+		return `${this.a11yId}-content`
+	}
 
 	/** ElementInternals — broadcasts `:state(open)` for consumer CSS. */
 	private readonly internals: ElementInternals | undefined = (() => {
-		try { return this.attachInternals() } catch { return undefined }
+		try {
+			return this.attachInternals()
+		} catch {
+			return undefined
+		}
 	})()
 
 	updated(changed: Map<string, unknown>) {

package/src/types/surface.ts

@@ -1,52 +1,46 @@
 /**
- * Luminous Glass surface types.
+ * Surface vocabulary — three closed sets covering every `type` value
+ * `<schmancy-surface>` accepts.
  *
- * Structural types control depth via blur intensity and opacity.
- * Nothing is opaque — every layer is translucent glass:
- * - `solid`    — Dense glass, barely translucent (highest readability, 2px blur)
- * - `subtle`   — Frosted glass panel (8px blur, 65% opacity)
- * - `glass`    — Full frosted glass with shimmer highlight (16px blur, 30% opacity)
- * - `luminous` — Glass + animated glow halo for hero panels (24px blur, 22% opacity)
+ * Tonal names express depth: each renders one constant glass material
+ * (`backdrop-filter: var(--glass-material)`) whose base tint is the
+ * matching M3 tonal token (`--glass-base`). Depth is tone, not blur.
  *
- * Semantic types apply tinted glass for status/role:
- * - `primary`, `secondary`, `tertiary`, `error`, `success`, `warning`, `info`
+ * Semantic names apply a translucent role tint (`primary`…`info`).
+ * Utility names cover the no-paint and border-only cases.
  *
- * Utility types:
- * - `transparent` — No background
- * - `outlined`    — Border only with luminous hover
+ * The exact `--glass-material` and `--glass-opacity` values are the
+ * single source of truth in `surface.styles.ts` and documented in
+ * `skills/schmancy/surface.md`.
  */
 
-/** New Luminous Glass types */
-export type TSurfaceColorNew =
-	| 'solid'
-	| 'subtle'
-	| 'glass'
-	| 'luminous'
-	| 'transparent'
-	| 'outlined'
-	| 'primary'
-	| 'secondary'
-	| 'tertiary'
-	| 'error'
-	| 'success'
-	| 'warning'
-	| 'info'
+/** M3 tonal depth names — eight levels, lightest to highest */
+export const SURFACE_TONAL = [
+	'surface',
+	'surfaceDim',
+	'surfaceBright',
+	'containerLowest',
+	'containerLow',
+	'container',
+	'containerHigh',
+	'containerHighest',
+] as const
 
-/**
- * @deprecated Legacy M3 types — mapped to new Luminous Glass equivalents.
- * - surface, surfaceDim, surfaceBright, containerLowest → solid
- * - containerLow, container → subtle
- * - containerHigh, containerHighest, glassOforim → glass
- */
-export type TSurfaceColorLegacy =
-	| 'surface'
-	| 'surfaceDim'
-	| 'surfaceBright'
-	| 'containerLowest'
-	| 'containerLow'
-	| 'container'
-	| 'containerHigh'
-	| 'containerHighest'
-	| 'glassOforim'
+/** Role-tinted glass names */
+export const SURFACE_SEMANTIC = [
+	'primary',
+	'secondary',
+	'tertiary',
+	'error',
+	'success',
+	'warning',
+	'info',
+] as const
+
+/** No-paint and border-only utility names */
+export const SURFACE_UTILITY = ['transparent', 'outlined'] as const
 
-export type TSurfaceColor = TSurfaceColorNew | TSurfaceColorLegacy
+export type TSurfaceColor =
+	| (typeof SURFACE_TONAL)[number]
+	| (typeof SURFACE_SEMANTIC)[number]
+	| (typeof SURFACE_UTILITY)[number]

package/src/typewriter/typewriter.directive.ts

@@ -138,10 +138,7 @@ class TypewriterDirective extends AsyncDirective {
 		return noChange
 	}
 
-	override update(
-		part: ElementPart,
-		[phrases, options = {}]: [string[], TypewriterOptions]
-	) {
+	override update(part: ElementPart, [phrases, options = {}]: [string[], TypewriterOptions]) {
 		const element = part.element as HTMLElement
 
 		// Clean up if params changed
@@ -179,14 +176,10 @@ class TypewriterDirective extends AsyncDirective {
 			}
 
 			// Find target element
-			this.state.targetElement = element.querySelector<HTMLElement>(
-				this.state.options.selector
-			) ?? undefined
+			this.state.targetElement = element.querySelector<HTMLElement>(this.state.options.selector) ?? undefined
 
 			if (!this.state.targetElement) {
-				console.warn(
-					`Typewriter: Target element "${this.state.options.selector}" not found`
-				)
+				console.warn(`Typewriter: Target element "${this.state.options.selector}" not found`)
 				return noChange
 			}
 
@@ -236,10 +229,10 @@ class TypewriterDirective extends AsyncDirective {
 				defer(() => {
 					const chars = phrase.split('')
 					return concat(
-						...chars.map((char) =>
+						...chars.map(char =>
 							of(char).pipe(
 								delay(options.typeSpeed),
-								tap((c) => {
+								tap(c => {
 									const textNode = this.getTextNode(targetElement)
 									if (textNode) {
 										textNode.textContent += c
@@ -248,53 +241,51 @@ class TypewriterDirective extends AsyncDirective {
 									if (this.soundEngine) {
 										this.soundEngine.playKeyPress()
 									}
-								})
-							)
-						)
+								}),
+							),
+						),
 					)
 				}),
 				// Pause after typing
 				of(null).pipe(delay(options.pauseDuration)),
 				// Delete each character (only if shouldDelete is true)
-				shouldDelete ? defer(() => {
-					const deleteCount = phrase.length
-					return interval(options.deleteSpeed).pipe(
-						take(deleteCount),
-						tap(() => {
-							const textNode = this.getTextNode(targetElement)
-							if (textNode && textNode.textContent) {
-								textNode.textContent = textNode.textContent.slice(0, -1)
-							}
-							// Play delete sound
-							if (this.soundEngine) {
-								this.soundEngine.playDelete()
-							}
+				shouldDelete
+					? defer(() => {
+							const deleteCount = phrase.length
+							return interval(options.deleteSpeed).pipe(
+								take(deleteCount),
+								tap(() => {
+									const textNode = this.getTextNode(targetElement)
+									if (textNode && textNode.textContent) {
+										textNode.textContent = textNode.textContent.slice(0, -1)
+									}
+									// Play delete sound
+									if (this.soundEngine) {
+										this.soundEngine.playDelete()
+									}
+								}),
+							)
 						})
-					)
-				}) : EMPTY,
+					: EMPTY,
 				// Small pause before next phrase
-				shouldDelete ? of(null).pipe(delay(200)) : EMPTY
+				shouldDelete ? of(null).pipe(delay(200)) : EMPTY,
 			)
 		}
 
 		// Create observable that cycles through all phrases
-		const phrasesSequence = concat(
-			...phrases.map((phrase) => typePhrase(phrase))
-		)
+		const phrasesSequence = concat(...phrases.map(phrase => typePhrase(phrase)))
 
 		// Add final message if provided
 		const typingSequence = options.finalMessage
 			? concat(
 					phrasesSequence,
-					typePhrase(options.finalMessage, false) // Don't delete final message
+					typePhrase(options.finalMessage, false), // Don't delete final message
 				)
 			: phrasesSequence
 
 		// Subscribe and optionally loop
-		this.state.subscription = (
-			options.loop ? phrasesSequence.pipe(repeat()) : typingSequence
-		).subscribe({
-			error: (err) => console.error('Typewriter error:', err),
+		this.state.subscription = (options.loop ? phrasesSequence.pipe(repeat()) : typingSequence).subscribe({
+			error: err => console.error('Typewriter error:', err),
 		})
 	}