@mhmo91/schmancy 0.10.41 → 0.10.43

package/src/typography/typography.ts

@@ -13,283 +13,285 @@ import { filter, tap, takeUntil } from 'rxjs/operators'
  */
 @customElement('schmancy-typography')
 export class SchmancyTypography extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-		font-family: inherit;
-		hyphens: none;
-	}
+	static styles = [
+		css`
+			:host {
+				display: block;
+				font-family: inherit;
+				hyphens: none;
+			}
 
-	/* Text alignment */
-	:host([align='center']) {
-		text-align: center;
-	}
+			/* Text alignment */
+			:host([align='center']) {
+				text-align: center;
+			}
 
-	:host([align='left']) {
-		text-align: start;
-	}
+			:host([align='left']) {
+				text-align: start;
+			}
 
-	:host([align='right']) {
-		text-align: right;
-	}
+			:host([align='right']) {
+				text-align: right;
+			}
 
-	:host([align='justify']) {
-		text-align: justify;
-	}
+			:host([align='justify']) {
+				text-align: justify;
+			}
 
-	/* Font weight */
-	:host([weight='bold']) {
-		font-weight: 700;
-	}
+			/* Font weight */
+			:host([weight='bold']) {
+				font-weight: 700;
+			}
 
-	:host([weight='medium']) {
-		font-weight: 500;
-	}
+			:host([weight='medium']) {
+				font-weight: 500;
+			}
 
-	:host([weight='normal']) {
-		font-weight: 400;
-	}
+			:host([weight='normal']) {
+				font-weight: 400;
+			}
 
-	/* Text transform */
-	:host([transform='uppercase']) {
-		text-transform: uppercase;
-	}
+			/* Text transform */
+			:host([transform='uppercase']) {
+				text-transform: uppercase;
+			}
 
-	:host([transform='lowercase']) {
-		text-transform: lowercase;
-	}
+			:host([transform='lowercase']) {
+				text-transform: lowercase;
+			}
 
-	:host([transform='capitalize']) {
-		text-transform: capitalize;
-	}
+			:host([transform='capitalize']) {
+				text-transform: capitalize;
+			}
 
-	:host([transform='normal']) {
-		text-transform: none;
-	}
+			:host([transform='normal']) {
+				text-transform: none;
+			}
 
-	/* Type-based weight defaults (when using Tailwind classes without token) */
-	:host([type='display']),
-	:host([type='headline']),
-	:host([type='body']) {
-		font-weight: 400;
-	}
+			/* Type-based weight defaults (when using Tailwind classes without token) */
+			:host([type='display']),
+			:host([type='headline']),
+			:host([type='body']) {
+				font-weight: 400;
+			}
 
-	:host([type='label']),
-	:host([type='subtitle']),
-	:host([type='title']) {
-		font-weight: 500;
-	}
+			:host([type='label']),
+			:host([type='subtitle']),
+			:host([type='title']) {
+				font-weight: 500;
+			}
 
-	/* Display typography variants - Material Design 3 + Extended */
-	:host([type='display'][token='xl']) {
-		font-size: 72px;
-		line-height: 80px;
-		font-weight: 400;
-	}
+			/* Display typography variants - Material Design 3 + Extended */
+			:host([type='display'][token='xl']) {
+				font-size: 72px;
+				line-height: 80px;
+				font-weight: 400;
+			}
 
-	:host([type='display'][token='lg']) {
-		font-size: 57px;
-		line-height: 64px;
-		font-weight: 400;
-	}
+			:host([type='display'][token='lg']) {
+				font-size: 57px;
+				line-height: 64px;
+				font-weight: 400;
+			}
 
-	:host([type='display'][token='md']) {
-		font-size: 45px;
-		line-height: 52px;
-		font-weight: 400;
-	}
+			:host([type='display'][token='md']) {
+				font-size: 45px;
+				line-height: 52px;
+				font-weight: 400;
+			}
 
-	:host([type='display'][token='sm']) {
-		font-size: 36px;
-		line-height: 44px;
-		font-weight: 400;
-	}
+			:host([type='display'][token='sm']) {
+				font-size: 36px;
+				line-height: 44px;
+				font-weight: 400;
+			}
 
-	:host([type='display'][token='xs']) {
-		font-size: 28px;
-		line-height: 36px;
-		font-weight: 400;
-	}
+			:host([type='display'][token='xs']) {
+				font-size: 28px;
+				line-height: 36px;
+				font-weight: 400;
+			}
 
-	/* Headline typography variants - Material Design 3 + Extended */
-	:host([type='headline'][token='xl']) {
-		font-size: 36px;
-		line-height: 44px;
-		font-weight: 400;
-	}
+			/* Headline typography variants - Material Design 3 + Extended */
+			:host([type='headline'][token='xl']) {
+				font-size: 36px;
+				line-height: 44px;
+				font-weight: 400;
+			}
 
-	:host([type='headline'][token='lg']) {
-		font-size: 32px;
-		line-height: 40px;
-		font-weight: 400;
-	}
+			:host([type='headline'][token='lg']) {
+				font-size: 32px;
+				line-height: 40px;
+				font-weight: 400;
+			}
 
-	:host([type='headline'][token='md']) {
-		font-size: 28px;
-		line-height: 36px;
-		font-weight: 400;
-	}
+			:host([type='headline'][token='md']) {
+				font-size: 28px;
+				line-height: 36px;
+				font-weight: 400;
+			}
 
-	:host([type='headline'][token='sm']) {
-		font-size: 24px;
-		line-height: 32px;
-		font-weight: 400;
-	}
+			:host([type='headline'][token='sm']) {
+				font-size: 24px;
+				line-height: 32px;
+				font-weight: 400;
+			}
 
-	:host([type='headline'][token='xs']) {
-		font-size: 20px;
-		line-height: 28px;
-		font-weight: 400;
-	}
+			:host([type='headline'][token='xs']) {
+				font-size: 20px;
+				line-height: 28px;
+				font-weight: 400;
+			}
 
-	/* Title typography variants - Material Design 3 + Extended */
-	:host([type='title'][token='xl']) {
-		font-size: 24px;
-		line-height: 32px;
-		font-weight: 400;
-	}
+			/* Title typography variants - Material Design 3 + Extended */
+			:host([type='title'][token='xl']) {
+				font-size: 24px;
+				line-height: 32px;
+				font-weight: 400;
+			}
 
-	:host([type='title'][token='lg']) {
-		font-size: 22px;
-		line-height: 28px;
-		font-weight: 400;
-	}
+			:host([type='title'][token='lg']) {
+				font-size: 22px;
+				line-height: 28px;
+				font-weight: 400;
+			}
 
-	:host([type='title'][token='md']) {
-		font-size: 16px;
-		line-height: 24px;
-		font-weight: 500;
-	}
+			:host([type='title'][token='md']) {
+				font-size: 16px;
+				line-height: 24px;
+				font-weight: 500;
+			}
 
-	:host([type='title'][token='sm']) {
-		font-size: 14px;
-		line-height: 20px;
-		font-weight: 500;
-	}
+			:host([type='title'][token='sm']) {
+				font-size: 14px;
+				line-height: 20px;
+				font-weight: 500;
+			}
 
-	:host([type='title'][token='xs']) {
-		font-size: 12px;
-		line-height: 16px;
-		font-weight: 500;
-	}
+			:host([type='title'][token='xs']) {
+				font-size: 12px;
+				line-height: 16px;
+				font-weight: 500;
+			}
 
-	/* Subtitle typography variants - Extended from Material Design 3 */
-	:host([type='subtitle'][token='xl']) {
-		font-size: 20px;
-		line-height: 28px;
-		font-weight: 500;
-	}
+			/* Subtitle typography variants - Extended from Material Design 3 */
+			:host([type='subtitle'][token='xl']) {
+				font-size: 20px;
+				line-height: 28px;
+				font-weight: 500;
+			}
 
-	:host([type='subtitle'][token='lg']) {
-		font-size: 18px;
-		line-height: 24px;
-		font-weight: 500;
-	}
+			:host([type='subtitle'][token='lg']) {
+				font-size: 18px;
+				line-height: 24px;
+				font-weight: 500;
+			}
 
-	:host([type='subtitle'][token='md']) {
-		font-size: 16px;
-		line-height: 24px;
-		font-weight: 500;
-	}
+			:host([type='subtitle'][token='md']) {
+				font-size: 16px;
+				line-height: 24px;
+				font-weight: 500;
+			}
 
-	:host([type='subtitle'][token='sm']) {
-		font-size: 14px;
-		line-height: 20px;
-		font-weight: 500;
-	}
+			:host([type='subtitle'][token='sm']) {
+				font-size: 14px;
+				line-height: 20px;
+				font-weight: 500;
+			}
 
-	:host([type='subtitle'][token='xs']) {
-		font-size: 12px;
-		line-height: 16px;
-		font-weight: 500;
-	}
+			:host([type='subtitle'][token='xs']) {
+				font-size: 12px;
+				line-height: 16px;
+				font-weight: 500;
+			}
 
-	/* Body typography variants - Material Design 3 + Extended */
-	:host([type='body'][token='xl']) {
-		font-size: 18px;
-		line-height: 28px;
-		font-weight: 400;
-	}
+			/* Body typography variants - Material Design 3 + Extended */
+			:host([type='body'][token='xl']) {
+				font-size: 18px;
+				line-height: 28px;
+				font-weight: 400;
+			}
 
-	:host([type='body'][token='lg']) {
-		font-size: 16px;
-		line-height: 24px;
-		font-weight: 400;
-	}
+			:host([type='body'][token='lg']) {
+				font-size: 16px;
+				line-height: 24px;
+				font-weight: 400;
+			}
 
-	:host([type='body'][token='md']) {
-		font-size: 14px;
-		line-height: 20px;
-		font-weight: 400;
-	}
+			:host([type='body'][token='md']) {
+				font-size: 14px;
+				line-height: 20px;
+				font-weight: 400;
+			}
 
-	:host([type='body'][token='sm']) {
-		font-size: 12px;
-		line-height: 16px;
-		font-weight: 400;
-	}
+			:host([type='body'][token='sm']) {
+				font-size: 12px;
+				line-height: 16px;
+				font-weight: 400;
+			}
 
-	:host([type='body'][token='xs']) {
-		font-size: 10px;
-		line-height: 14px;
-		font-weight: 400;
-	}
+			:host([type='body'][token='xs']) {
+				font-size: 10px;
+				line-height: 14px;
+				font-weight: 400;
+			}
 
-	/* Label typography variants - Material Design 3 + Extended */
-	:host([type='label'][token='xl']) {
-		font-size: 16px;
-		line-height: 22px;
-		font-weight: 500;
-	}
+			/* Label typography variants - Material Design 3 + Extended */
+			:host([type='label'][token='xl']) {
+				font-size: 16px;
+				line-height: 22px;
+				font-weight: 500;
+			}
 
-	:host([type='label'][token='lg']) {
-		font-size: 14px;
-		line-height: 20px;
-		font-weight: 500;
-	}
+			:host([type='label'][token='lg']) {
+				font-size: 14px;
+				line-height: 20px;
+				font-weight: 500;
+			}
 
-	:host([type='label'][token='md']) {
-		font-size: 12px;
-		line-height: 16px;
-		font-weight: 500;
-	}
+			:host([type='label'][token='md']) {
+				font-size: 12px;
+				line-height: 16px;
+				font-weight: 500;
+			}
 
-	:host([type='label'][token='sm']) {
-		font-size: 11px;
-		line-height: 16px;
-		font-weight: 500;
-	}
+			:host([type='label'][token='sm']) {
+				font-size: 11px;
+				line-height: 16px;
+				font-weight: 500;
+			}
 
-	:host([type='label'][token='xs']) {
-		font-size: 10px;
-		line-height: 14px;
-		font-weight: 500;
-	}
+			:host([type='label'][token='xs']) {
+				font-size: 10px;
+				line-height: 14px;
+				font-weight: 500;
+			}
 
-	/* Note: Custom letter-spacing, font-size, and line-height should be applied via inline styles or Tailwind classes */
+			/* Note: Custom letter-spacing, font-size, and line-height should be applied via inline styles or Tailwind classes */
 
-	:host([editable]) {
-		cursor: text;
-		border-radius: 4px;
-		transition: background 150ms;
-		min-height: 1em;
-	}
-	/* Editable div lives in shadow DOM so light DOM (Lit markers) is untouched */
-	.edit {
-		outline: none;
-		min-height: 1em;
-		font: inherit;
-		color: inherit;
-		letter-spacing: inherit;
-		line-height: inherit;
-	}
-	.edit:empty::before {
-		content: attr(data-placeholder);
-		pointer-events: none;
-		display: block;
-		opacity: 0.35;
-	}
-`];
+			:host([editable]) {
+				cursor: text;
+				border-radius: 4px;
+				transition: background 150ms;
+				min-height: 1em;
+			}
+			/* Editable div lives in shadow DOM so light DOM (Lit markers) is untouched */
+			.edit {
+				outline: none;
+				min-height: 1em;
+				font: inherit;
+				color: inherit;
+				letter-spacing: inherit;
+				line-height: inherit;
+			}
+			.edit:empty::before {
+				content: attr(data-placeholder);
+				pointer-events: none;
+				display: block;
+				opacity: 0.35;
+			}
+		`,
+	]
 	static shadowRootOptions: ShadowRootInit = {
 		mode: 'open',
 		delegatesFocus: true,
@@ -330,7 +332,7 @@ export class SchmancyTypography extends SchmancyElement {
 	 */
 	@property({ type: String, reflect: true })
 	weight: 'normal' | 'medium' | 'bold' | undefined
-	
+
 	/**
 	 *
 	 * @attr
@@ -338,7 +340,7 @@ export class SchmancyTypography extends SchmancyElement {
 	 * @type {'uppercase' |'lowercase' |'capitalize' |'normal'}
 	 * @public
 	 */
-	@property({ type: String, reflect: true }) 
+	@property({ type: String, reflect: true })
 	transform: 'uppercase' | 'lowercase' | 'capitalize' | 'normal' | undefined
 
 	@property({ type: Number })
@@ -370,48 +372,66 @@ export class SchmancyTypography extends SchmancyElement {
 	connectedCallback() {
 		super.connectedCallback()
 
-		fromEvent<FocusEvent>(this, 'focusout').pipe(
-			filter(() => this.editable),
-			tap(() => {
-				const el = this.editRef.value
-				if (!el) return
-				const newValue = el.innerText.trim()
-				if (newValue !== this.value) {
-					this.dispatchEvent(new CustomEvent('change', {
-						detail: { value: newValue },
-						bubbles: true,
-						composed: true,
-					}))
-				}
-				// Ensure truly empty so :empty CSS placeholder works
-				if (!newValue) el.textContent = ''
-			}),
-			takeUntil(this.disconnecting),
-		).subscribe()
+		fromEvent<FocusEvent>(this, 'focusout')
+			.pipe(
+				filter(() => this.editable),
+				tap(() => {
+					const el = this.editRef.value
+					if (!el) return
+					const newValue = el.innerText.trim()
+					if (newValue !== this.value) {
+						this.dispatchEvent(
+							new CustomEvent('change', {
+								detail: { value: newValue },
+								bubbles: true,
+								composed: true,
+							}),
+						)
+					}
+					// Ensure truly empty so :empty CSS placeholder works
+					if (!newValue) el.textContent = ''
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 
 		// Clean stray <br> / whitespace nodes so :empty CSS matches
-		fromEvent(this, 'input').pipe(
-			filter(() => this.editable),
-			tap(() => {
-				const el = this.editRef.value
-				if (el && !el.innerText.trim()) el.textContent = ''
-			}),
-			takeUntil(this.disconnecting),
-		).subscribe()
-
-		fromEvent<KeyboardEvent>(this, 'keydown').pipe(
-			filter(() => this.editable),
-			filter(e => e.key === 'Enter'),
-			tap(e => { e.preventDefault(); (this.editRef.value ?? this).blur() }),
-			takeUntil(this.disconnecting),
-		).subscribe()
+		fromEvent(this, 'input')
+			.pipe(
+				filter(() => this.editable),
+				tap(() => {
+					const el = this.editRef.value
+					if (el && !el.innerText.trim()) el.textContent = ''
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
+
+		fromEvent<KeyboardEvent>(this, 'keydown')
+			.pipe(
+				filter(() => this.editable),
+				filter(e => e.key === 'Enter'),
+				tap(e => {
+					e.preventDefault()
+					;(this.editRef.value ?? this).blur()
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 	}
 
 	protected updated(changedProperties: Map<string, unknown>): void {
 		super.updated(changedProperties)
 		if (changedProperties.has('maxLines')) {
 			// Remove all line-clamp classes
-			this.classList.remove('line-clamp-1', 'line-clamp-2', 'line-clamp-3', 'line-clamp-4', 'line-clamp-5', 'line-clamp-6')
+			this.classList.remove(
+				'line-clamp-1',
+				'line-clamp-2',
+				'line-clamp-3',
+				'line-clamp-4',
+				'line-clamp-5',
+				'line-clamp-6',
+			)
 			// Add the appropriate one
 			if (this.maxLines) {
 				this.classList.add(`line-clamp-${this.maxLines}`)
@@ -446,4 +466,4 @@ declare global {
 	interface HTMLElementTagNameMap {
 		'schmancy-typography': SchmancyTypography
 	}
-}
+}

package/src/utils/animation.ts

@@ -242,10 +242,7 @@ export function createAnimation(preset: AnimationPreset, keyframes: BlackbirdKey
  * Create a reveal animation (fade in + slide up).
  * Common pattern for content appearing.
  */
-export function createRevealAnimation(
-	preset: AnimationPreset = SPRING_SMOOTH,
-	distance = 16,
-): BlackbirdAnimation {
+export function createRevealAnimation(preset: AnimationPreset = SPRING_SMOOTH, distance = 16): BlackbirdAnimation {
 	return createAnimation(preset, {
 		from: { opacity: 0, transform: `translateY(-${distance}px) scale(0.96)` },
 		to: { opacity: 1, transform: 'translateY(0) scale(1)' },
@@ -256,10 +253,7 @@ export function createRevealAnimation(
  * Create a dismiss animation (fade out + slide up).
  * Common pattern for content disappearing.
  */
-export function createDismissAnimation(
-	preset: AnimationPreset = SPRING_SMOOTH,
-	distance = 12,
-): BlackbirdAnimation {
+export function createDismissAnimation(preset: AnimationPreset = SPRING_SMOOTH, distance = 12): BlackbirdAnimation {
 	const anim = createAnimation(preset, {
 		from: { opacity: 1, transform: 'translateY(0) scale(1)' },
 		to: { opacity: 0, transform: `translateY(-${distance}px) scale(0.97)` },