@mhmo91/schmancy 0.10.41 → 0.10.43

package/src/audio/sound.service.ts

@@ -719,19 +719,19 @@ class SoundService {
 	// Don't use distinctUntilChanged for theme - we need all emissions including storage loads
 	public readonly theme$ = SoundContext.$.pipe(
 		map(settings => settings.theme),
-		shareReplay(1)
+		shareReplay(1),
 	)
 
 	public readonly volume$ = SoundContext.$.pipe(
 		map(settings => settings.volume),
 		distinctUntilChanged(),
-		shareReplay(1)
+		shareReplay(1),
 	)
 
 	public readonly muted$ = SoundContext.$.pipe(
 		map(settings => settings.muted),
 		distinctUntilChanged(),
-		shareReplay(1)
+		shareReplay(1),
 	)
 
 	/** BehaviorSubject for current theme name (for debugging/display) */
@@ -991,8 +991,29 @@ class SoundService {
 			'hostile',
 			'contemptuous',
 		]
-		const tiredFeelings: Feeling[] = ['tired', 'exhausted', 'drained', 'burnedOut', 'numb', 'bored', 'unmotivated', 'apathetic', 'restless']
-		const calmFeelings: Feeling[] = ['calm', 'relaxed', 'atEase', 'balanced', 'stable', 'secure', 'safe', 'centered', 'grounded', 'accepting']
+		const tiredFeelings: Feeling[] = [
+			'tired',
+			'exhausted',
+			'drained',
+			'burnedOut',
+			'numb',
+			'bored',
+			'unmotivated',
+			'apathetic',
+			'restless',
+		]
+		const calmFeelings: Feeling[] = [
+			'calm',
+			'relaxed',
+			'atEase',
+			'balanced',
+			'stable',
+			'secure',
+			'safe',
+			'centered',
+			'grounded',
+			'accepting',
+		]
 		const connectedFeelings: Feeling[] = [
 			'connected',
 			'accepted',

package/src/avatar/avatar.ts

@@ -67,11 +67,11 @@ export class SchmancyAvatar extends SchmancyElement {
 		// Size classes - M3 aligned: 20dp → 24dp → 32dp → 40dp → 48dp → 64dp
 		const sizeClasses = {
 			xxs: 'w-5 h-5 text-[8px]', // 20px - Ultra-compact
-			xs: 'w-6 h-6 text-xs',     // 24px - M3 compact
-			sm: 'w-8 h-8 text-sm',     // 32px - M3 small
+			xs: 'w-6 h-6 text-xs', // 24px - M3 compact
+			sm: 'w-8 h-8 text-sm', // 32px - M3 small
 			md: 'w-10 h-10 text-base', // 40px - M3 medium (default)
-			lg: 'w-12 h-12 text-lg',   // 48px - M3 large
-			xl: 'w-16 h-16 text-xl',   // 64px - M3 extra large
+			lg: 'w-12 h-12 text-lg', // 48px - M3 large
+			xl: 'w-16 h-16 text-xl', // 64px - M3 extra large
 		}
 
 		// Shape classes

package/src/badge/badge.ts

@@ -5,265 +5,117 @@ import { customElement, property } from 'lit/decorators.js'
 import { SchmancyTheme } from '..'
 
 /**
- * Badge color types for predefined styles
+ * Semantic color of the badge. Each name maps to one theme color role —
+ * filled badges use that role's container / onContainer, outlined badges
+ * use its strong tone for text and border.
  */
 export type BadgeColor = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'neutral' | 'surface'
 
 /**
- * Badge size variants
+ * Badge size. Sizes differ only in type scale and padding density.
  */
-export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
+export type BadgeSize = 'xs' | 'sm' | 'md'
 
 /**
- * Badge shape variants
+ * Badge corner shape.
  */
-export type BadgeShape = 'rounded' | 'pill' | 'square'
+export type BadgeShape = 'pill' | 'rounded'
 
 /**
- * @element sch-badge
- * A versatile badge component for status indicators, labels, and counts
+ * @element schmancy-badge
+ * A status, label, or count pill. It annotates content; it does not
+ * compete with it — no shadow, no hover affordance, no motion.
  *
- * @slot - The content of the badge (text or HTML)
- * @slot icon - Optional icon to display before the content
+ * @slot - The content of the badge (text or short HTML)
  *
  * @csspart badge - The badge element container
  * @csspart content - The content container
- * @csspart icon - The icon container
  */
 @customElement('schmancy-badge')
 export class SchmancyBadgeV2 extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: inline-flex;
-		flex-shrink: 0;
-		width: fit-content;
-	}
-
-	/* Enhanced pulse animation for better attention-getting */
-	@keyframes elegant-pulse {
-		0%, 100% {
-			opacity: 1;
-		}
-		50% {
-			opacity: 0.85;
-		}
-	}
-
-	.animate-pulse {
-		animation: elegant-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: inline-flex;
+				flex-shrink: 0;
+				width: fit-content;
+			}
+		`,
+	]
 	/**
-	 * The color variant of the badge
+	 * The semantic color of the badge.
 	 * @attr
 	 */
 	@property({ type: String, reflect: true })
 	color: BadgeColor = 'primary'
 
 	/**
-	 * The size of the badge
+	 * The size of the badge.
 	 * @attr
 	 */
 	@property({ type: String, reflect: true })
 	size: BadgeSize = 'md'
 
 	/**
-	 * The shape of the badge
+	 * The corner shape of the badge.
 	 * @attr
 	 */
 	@property({ type: String, reflect: true })
 	shape: BadgeShape = 'pill'
 
 	/**
-	 * Whether the badge has an outlined style
+	 * Outlined style: transparent fill, the color's strong tone for text and border.
 	 * @attr
 	 */
 	@property({ type: Boolean, reflect: true })
 	outlined = false
 
-	/**
-	 * Custom icon name to display (if no icon slot is provided)
-	 * @attr
-	 */
-	@property({ type: String })
-	icon = ''
-
-	/**
-	 * Whether to make the badge pulse to draw attention
-	 * @attr
-	 */
-	@property({ type: Boolean, reflect: true })
-	pulse = false
-
-	/**
-	 * Convert the size to appropriate Tailwind classes for the badge container
-	 * Using harmonious padding ratios based on golden ratio principles
-	 * Refined for more elegant proportions
-	 */
-	private getSizeClasses(): string {
-		switch (this.size) {
-			case 'xs':
-				return 'text-xs py-0.75 px-1.5 gap-0.5 leading-none'
-			case 'sm':
-				return 'text-xs py-1.5 px-2.5 gap-0.5 tracking-wide leading-none'
-			case 'lg':
-				return 'text-base py-2 px-4 gap-1 tracking-wide'
-			case 'md':
-			default:
-				return 'text-sm py-1.5 px-3 gap-0.5'
-		}
-	}
-
-	/**
-	 * Get shape classes based on selected shape
-	 */
-	private getShapeClasses(): string {
-		switch (this.shape) {
-			case 'square':
-				return 'rounded'
-			case 'rounded':
-				return 'rounded-md'
-			case 'pill':
-			default:
-				return 'rounded-full'
-		}
-	}
-
-	/**
-	 * Get icon size based on badge size with harmonious proportions
-	 * Using golden ratio-inspired proportions relative to text size
-	 */
-	private getIconSizeClass(): string {
-		switch (this.size) {
-			case 'xs': return 'text-xs'
-			case 'sm': return 'text-sm'
-			case 'lg': return 'text-lg'
-			case 'md':
-			default:   return 'text-sm'
-		}
-	}
-
-	/**
-	 * Get additional styling for specific sizes
-	 */
-	private getExoticStyles(): Record<string, string> {
-		const styles: Record<string, string> = {}
-
-		if (this.size === 'lg') {
-			styles.letterSpacing = '0.03em'
-			styles.fontWeight = '500'
-		}
-
-		if (this.size === 'sm') {
-			styles.letterSpacing = '0.02em'
-		}
-
-		return styles
-	}
-
-	/**
-	 * Get background and text colors based on selected color variant
-	 * Enhanced for more elegant color combinations with refined contrasts
-	 */
-	private getColorStyles() {
-		const colors: Record<BadgeColor, { bg: string; text: string; border?: string }> = {
-			primary: {
-				bg: this.outlined ? 'transparent' : `color-mix(in srgb, ${SchmancyTheme.sys.color.primary.container} 92%, ${SchmancyTheme.sys.color.primary.default} 8%)`,
-				text: this.outlined ? SchmancyTheme.sys.color.primary.default : SchmancyTheme.sys.color.primary.onContainer,
-				border: this.outlined ? `color-mix(in srgb, ${SchmancyTheme.sys.color.primary.default} 90%, ${SchmancyTheme.sys.color.surface.highest} 10%)` : undefined,
-			},
-			secondary: {
-				bg: this.outlined ? 'transparent' : `color-mix(in srgb, ${SchmancyTheme.sys.color.secondary.container} 95%, ${SchmancyTheme.sys.color.secondary.default} 5%)`,
-				text: this.outlined ? SchmancyTheme.sys.color.secondary.default : SchmancyTheme.sys.color.secondary.onContainer,
-				border: this.outlined ? `color-mix(in srgb, ${SchmancyTheme.sys.color.secondary.default} 85%, ${SchmancyTheme.sys.color.surface.highest} 15%)` : undefined,
-			},
-			tertiary: {
-				bg: this.outlined ? 'transparent' : `color-mix(in srgb, ${SchmancyTheme.sys.color.tertiary.container} 94%, ${SchmancyTheme.sys.color.tertiary.default} 6%)`,
-				text: this.outlined ? SchmancyTheme.sys.color.tertiary.default : SchmancyTheme.sys.color.tertiary.onContainer,
-				border: this.outlined ? `color-mix(in srgb, ${SchmancyTheme.sys.color.tertiary.default} 88%, ${SchmancyTheme.sys.color.surface.highest} 12%)` : undefined,
-			},
-			success: {
-				bg: this.outlined ? 'transparent' : `color-mix(in srgb, ${SchmancyTheme.sys.color.success.container} 90%, ${SchmancyTheme.sys.color.success.default} 10%)`,
-				text: this.outlined ? SchmancyTheme.sys.color.success.default : SchmancyTheme.sys.color.success.onContainer,
-				border: this.outlined ? `color-mix(in srgb, ${SchmancyTheme.sys.color.success.default} 85%, ${SchmancyTheme.sys.color.surface.bright} 15%)` : undefined,
-			},
-			warning: {
-				bg: this.outlined ? 'transparent' : `color-mix(in srgb, ${SchmancyTheme.sys.color.tertiary.container} 85%, ${SchmancyTheme.sys.color.tertiary.default} 15%)`,
-				text: this.outlined ? SchmancyTheme.sys.color.tertiary.default : SchmancyTheme.sys.color.tertiary.onContainer,
-				border: this.outlined ? `color-mix(in srgb, ${SchmancyTheme.sys.color.tertiary.default} 90%, ${SchmancyTheme.sys.color.surface.highest} 10%)` : undefined,
-			},
-			error: {
-				bg: this.outlined ? 'transparent' : `color-mix(in srgb, ${SchmancyTheme.sys.color.error.container} 92%, ${SchmancyTheme.sys.color.error.default} 8%)`,
-				text: this.outlined ? SchmancyTheme.sys.color.error.default : SchmancyTheme.sys.color.error.onContainer,
-				border: this.outlined ? `color-mix(in srgb, ${SchmancyTheme.sys.color.error.default} 88%, ${SchmancyTheme.sys.color.surface.bright} 12%)` : undefined,
-			},
+	render() {
+		const sizeClasses =
+			this.size === 'xs'
+				? 'text-xs px-1.5 py-0.5'
+				: this.size === 'sm'
+					? 'text-xs px-2 py-0.5'
+					: 'text-sm px-2.5 py-0.5'
+
+		const shapeClass = this.shape === 'rounded' ? 'rounded-md' : 'rounded-full'
+
+		const role = {
+			primary: SchmancyTheme.sys.color.primary,
+			secondary: SchmancyTheme.sys.color.secondary,
+			tertiary: SchmancyTheme.sys.color.tertiary,
+			success: SchmancyTheme.sys.color.success,
+			warning: SchmancyTheme.sys.color.warning,
+			error: SchmancyTheme.sys.color.error,
 			neutral: {
-				bg: this.outlined ? 'transparent' : `color-mix(in srgb, ${SchmancyTheme.sys.color.surface.high} 95%, ${SchmancyTheme.sys.color.outline} 5%)`,
-				text: this.outlined ? `color-mix(in srgb, ${SchmancyTheme.sys.color.surface.on} 95%, ${SchmancyTheme.sys.color.surface.default} 5%)` : SchmancyTheme.sys.color.surface.on,
-				border: this.outlined ? `color-mix(in srgb, ${SchmancyTheme.sys.color.outline} 85%, ${SchmancyTheme.sys.color.surface.highest} 15%)` : undefined,
+				container: SchmancyTheme.sys.color.surface.high,
+				onContainer: SchmancyTheme.sys.color.surface.on,
+				default: SchmancyTheme.sys.color.surface.on,
 			},
 			surface: {
-				bg: this.outlined ? 'transparent' : SchmancyTheme.sys.color.surface.high,
-				text: SchmancyTheme.sys.color.surface.on,
-				border: this.outlined ? SchmancyTheme.sys.color.outline : undefined,
+				container: SchmancyTheme.sys.color.surface.container,
+				onContainer: SchmancyTheme.sys.color.surface.on,
+				default: SchmancyTheme.sys.color.surface.on,
 			},
-		}
-
-		return colors[this.color]
-	}
-
-	render() {
-		const sizeClasses = this.getSizeClasses()
-		const shapeClasses = this.getShapeClasses()
-		const colorStyles = this.getColorStyles()
-		const iconSizeClass = this.getIconSizeClass()
-		const exoticStyles = this.getExoticStyles()
-
-		const badgeClasses = {
-			'inline-flex items-center justify-center font-medium': true,
-			'transition-all duration-200 ease-in-out': true,
-			[sizeClasses]: true,
-			[shapeClasses]: true,
-			'animate-pulse': this.pulse,
-			'border border-solid': this.outlined,
-			'shadow-sm': !this.outlined && this.size === 'sm',
-			'shadow': !this.outlined && this.size === 'md',
-			'shadow-md': !this.outlined && this.size === 'lg',
-			'hover:brightness-95 hover:-translate-y-px': this.outlined,
-			'hover:brightness-[0.98]': !this.outlined,
-		}
-
-		// Refined styles for a more elegant look (only CSS that can't be done with Tailwind)
-		const styles = {
-			borderColor: colorStyles.border,
-			backdropFilter: this.outlined ? 'blur(4px)' : undefined,
-			boxShadow: this.size === 'lg' && !this.outlined ? '0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1)' : undefined,
-			...exoticStyles,
-		}
+		}[this.color]
 
 		return html`
 			<div
 				part="badge"
-				class="${this.classMap(badgeClasses)}"
-				style="${this.styleMap(styles)}"
+				class="${this.classMap({
+					'inline-flex items-center justify-center font-medium leading-none': true,
+					'transition-colors duration-150': true,
+					'border border-solid': this.outlined,
+					[sizeClasses]: true,
+					[shapeClass]: true,
+				})}"
+				style="${this.styleMap({ borderColor: this.outlined ? role.default : undefined })}"
 				${color({
-					bgColor: colorStyles.bg,
-					color: colorStyles.text,
+					bgColor: this.outlined ? 'transparent' : role.container,
+					color: this.outlined ? role.default : role.onContainer,
 				})}
 			>
-				<!-- Icon slot or named icon -->
-				<slot name="icon">
-					${this.icon
-						? html`
-								<div part="icon" class="shrink-0 flex items-center justify-center leading-none">
-									<schmancy-icon class="${iconSizeClass} flex items-center justify-center">${this.icon}</schmancy-icon>
-								</div>
-							`
-						: ''}
-				</slot>
-
-				<!-- Content with proper spacing from icon -->
-				<div part="content" class="flex items-center leading-none tracking-[0.01em] ${this.icon ? 'ml-[0.38em]' : ''}">
+				<div part="content" class="flex items-center leading-none tracking-[0.01em]">
 					<slot></slot>
 				</div>
 			</div>
@@ -273,12 +125,11 @@ export class SchmancyBadgeV2 extends SchmancyElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'sch-badge': SchmancyBadgeV2,
+		'sch-badge': SchmancyBadgeV2
 		'schmancy-badge': SchmancyBadgeV2
 	}
 }
 
-
 // Register the component with the legacy tag name for backward compatibility
 @customElement('sch-badge')
 export class ScBadgeV2 extends SchmancyBadgeV2 {}

package/src/badge/index.ts

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

package/src/boat/boat.ts

@@ -399,10 +399,8 @@ export default class SchmancyBoat extends SchmancyElement {
 		return html`
 			<schmancy-surface
 				${ref(this.containerRef)}
-				type="glass"
-				rounded="all"
-				.elevation=${3}
-				class="${containerClasses} overflow-hidden rounded-2xl"
+				type="container"
+				class="${containerClasses} overflow-hidden rounded-2xl shadow-md"
 				style=${containerStyles}
 				aria-expanded=${this.open}
 			>

package/src/breadcrumb/breadcrumb.ts

@@ -13,25 +13,27 @@ import { customElement, property } from 'lit/decorators.js'
  */
 @customElement('schmancy-breadcrumb')
 export class SchmancyBreadcrumb extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-	}
-	nav {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 0.25rem;
-	}
-	.sep {
-		color: var(--schmancy-sys-color-surface-onVariant, #79747e);
-		user-select: none;
-		padding: 0 0.25rem;
-	}
-	::slotted(schmancy-breadcrumb-item:last-of-type) {
-		font-weight: 500;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: block;
+			}
+			nav {
+				display: flex;
+				flex-wrap: wrap;
+				align-items: center;
+				gap: 0.25rem;
+			}
+			.sep {
+				color: var(--schmancy-sys-color-surface-onVariant, #79747e);
+				user-select: none;
+				padding: 0 0.25rem;
+			}
+			::slotted(schmancy-breadcrumb-item:last-of-type) {
+				font-weight: 500;
+			}
+		`,
+	]
 	@property({ type: String }) separator = '/'
 
 	connectedCallback(): void {
@@ -80,19 +82,22 @@ export class SchmancyBreadcrumb extends SchmancyElement {
  */
 @customElement('schmancy-breadcrumb-item')
 export class SchmancyBreadcrumbItem extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: inline-block;
-		width: fit-content;
-	}
-	a, span {
-		color: inherit;
-		text-decoration: none;
-	}
-	a:hover {
-		text-decoration: underline;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: inline-block;
+				width: fit-content;
+			}
+			a,
+			span {
+				color: inherit;
+				text-decoration: none;
+			}
+			a:hover {
+				text-decoration: underline;
+			}
+		`,
+	]
 	@property({ type: String }) href = ''
 	@property({ type: Boolean, reflect: true }) current = false
 

package/src/busy/busy.ts

@@ -4,27 +4,30 @@ import { customElement } from 'lit/decorators.js'
 
 @customElement('schmancy-busy')
 export default class SchmancyBusy extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: inline;
-		position: absolute;
-		inset: 0;
-		pointer-events: all;
-		z-index: 50;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: inline;
+				position: absolute;
+				inset: 0;
+				pointer-events: all;
+				z-index: 50;
+			}
+		`,
+	]
 	protected render(): unknown {
 		return html`
 			<!-- Clean overlay with subtle backdrop -->
-			<div class="absolute inset-0 flex items-center justify-center bg-surface-container/10 backdrop-blur-xs rounded-[inherit]">
+			<div
+				class="absolute inset-0 flex items-center justify-center bg-surface-container/10 backdrop-blur-xs rounded-[inherit]"
+			>
 				<!-- Content container with clean surface -->
 				<div class="relative flex items-center justify-center p-4">
-					
 					<!-- Content slot -->
 					<div class="relative z-10">
 						<slot>
 							<!-- Default spinner if no content provided -->
-							<schmancy-spinner ></schmancy-spinner>
+							<schmancy-spinner></schmancy-spinner>
 						</slot>
 					</div>
 				</div>

package/src/busy/index.ts

@@ -1,2 +1,2 @@
-export * from './busy';
-export * from './spinner';
+export * from './busy'
+export * from './spinner'