@mhmo91/schmancy 0.10.37 → 0.10.39

package/src/area/lazy.ts

@@ -1,83 +1,87 @@
-/**
- * Lazy loading for Schmancy Area components
- * Similar to React.lazy() but adapted for Web Components
- */
-
-// Type definition for custom element constructors
-type CustomElementConstructor = typeof HTMLElement
-
-/**
- * LazyComponent interface with preload capability
- */
-export interface LazyComponent<T extends CustomElementConstructor = CustomElementConstructor> {
-  (): Promise<{ default: T }>
-  preload(): Promise<void>
-  _promise?: Promise<{ default: T }>
-  _module?: { default: T }
-}
-
-/**
- * Create a lazy-loaded component that will be imported on demand
- *
- * @example
- * ```typescript
- * const LazyProfile = lazy(() => import('./profile'))
- *
- * // Use with area.push
- * area.push({
- *   component: LazyProfile,
- *   area: 'main'
- * })
- *
- * // Preload on hover
- * element.addEventListener('mouseenter', () => LazyProfile.preload())
- * ```
- *
- * @param loader - Dynamic import function that returns a module with default export
- * @returns LazyComponent function compatible with area.push()
- */
-export function lazy<T extends CustomElementConstructor>(
-  loader: () => Promise<{ default: T }>
-): LazyComponent<T> {
-
-  // Create the lazy component function
-  const lazyComponent = function(): Promise<{ default: T }> {
-    // Return cached promise if already loading/loaded
-    if (lazyComponent._promise) {
-      return lazyComponent._promise
-    }
-
-    // Return cached module if already loaded
-    if (lazyComponent._module) {
-      return Promise.resolve(lazyComponent._module)
-    }
-
-    // Start loading and cache the promise
-    lazyComponent._promise = loader()
-      .then(module => {
-        // Cache the loaded module
-        lazyComponent._module = module
-        return module
-      })
-      .catch(error => {
-        // Clear promise on error to allow retry
-        lazyComponent._promise = undefined
-        throw error
-      })
-
-    return lazyComponent._promise
-  } as LazyComponent<T>
-
-  // Add preload method for manual preloading
-  lazyComponent.preload = async function(): Promise<void> {
-    try {
-      await lazyComponent()
-    } catch (error) {
-      console.error('Failed to preload component:', error)
-    }
-  }
-
-  return lazyComponent
-}
-
-
+/**
+ * Lazy loading for Schmancy Area components
+ * Similar to React.lazy() but adapted for Web Components
+ */
+
+// Type definition for custom element constructors
+type CustomElementConstructor = typeof HTMLElement
+
+/**
+ * LazyComponent interface with preload capability
+ */
+export interface LazyComponent<T extends CustomElementConstructor = CustomElementConstructor> {
+  (): Promise<{ default: T }>
+  preload(): Promise<void>
+}
+
+// Per-component load cache. Kept off the public LazyComponent surface so the
+// interface stays a clean callable + preload() contract.
+const promiseCache = new WeakMap<object, Promise<{ default: CustomElementConstructor }>>()
+const moduleCache = new WeakMap<object, { default: CustomElementConstructor }>()
+
+/**
+ * Create a lazy-loaded component that will be imported on demand
+ *
+ * @example
+ * ```typescript
+ * const LazyProfile = lazy(() => import('./profile'))
+ *
+ * // Use with area.push
+ * area.push({
+ *   component: LazyProfile,
+ *   area: 'main'
+ * })
+ *
+ * // Preload on hover
+ * element.addEventListener('mouseenter', () => LazyProfile.preload())
+ * ```
+ *
+ * @param loader - Dynamic import function that returns a module with default export
+ * @returns LazyComponent function compatible with area.push()
+ */
+export function lazy<T extends CustomElementConstructor>(
+  loader: () => Promise<{ default: T }>
+): LazyComponent<T> {
+
+  // Create the lazy component function
+  const lazyComponent = function(): Promise<{ default: T }> {
+    // Return cached promise if already loading/loaded
+    const cachedPromise = promiseCache.get(lazyComponent)
+    if (cachedPromise) {
+      return cachedPromise as Promise<{ default: T }>
+    }
+
+    // Return cached module if already loaded
+    const cachedModule = moduleCache.get(lazyComponent)
+    if (cachedModule) {
+      return Promise.resolve(cachedModule as { default: T })
+    }
+
+    // Start loading and cache the promise
+    const promise = loader()
+      .then(module => {
+        // Cache the loaded module
+        moduleCache.set(lazyComponent, module)
+        return module
+      })
+      .catch(error => {
+        // Clear promise on error to allow retry
+        promiseCache.delete(lazyComponent)
+        throw error
+      })
+    promiseCache.set(lazyComponent, promise)
+
+    return promise
+  } as LazyComponent<T>
+
+  // Add preload method for manual preloading
+  lazyComponent.preload = async function(): Promise<void> {
+    try {
+      await lazyComponent()
+    } catch (error) {
+      console.error('Failed to preload component:', error)
+    }
+  }
+
+  return lazyComponent
+}

package/src/audio/sound.service.ts

@@ -735,8 +735,8 @@ class SoundService {
 	)
 
 	/** BehaviorSubject for current theme name (for debugging/display) */
-	private readonly _themeName$ = new BehaviorSubject<string>('default')
-	public readonly themeName$ = this._themeName$.asObservable()
+	readonly #themeName$ = new BehaviorSubject<string>('default')
+	public readonly themeName$ = this.#themeName$.asObservable()
 
 	// Getters for synchronous access
 	get theme(): SoundTheme | null {
@@ -758,7 +758,7 @@ class SoundService {
 	private constructor() {
 		// Subscribe to theme changes to update theme name
 		this.theme$.subscribe(theme => {
-			this._themeName$.next(theme?.name ?? 'default')
+			this.#themeName$.next(theme?.name ?? 'default')
 		})
 	}
 

package/src/badge/badge.ts

@@ -35,6 +35,7 @@ export class SchmancyBadgeV2 extends SchmancyElement {
 	static styles = [css`
 	:host {
 		display: inline-flex;
+		flex-shrink: 0;
 		width: fit-content;
 	}
 

package/src/breadcrumb/breadcrumb.ts

@@ -45,12 +45,12 @@ export class SchmancyBreadcrumb extends SchmancyElement {
 		// separator is visually present without affecting the accessible name.
 		return html`
 			<nav role="navigation">
-				<slot @slotchange=${() => this._insertSeparators()}></slot>
+				<slot @slotchange=${() => this.insertSeparators()}></slot>
 			</nav>
 		`
 	}
 
-	private _insertSeparators() {
+	private insertSeparators() {
 		const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement | null
 		if (!slot) return
 		const items = slot.assignedElements({ flatten: true })

package/src/button/button.ts

@@ -27,6 +27,7 @@ export type ButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warni
 export class SchmancyButton extends SchmancyElement {
 	static styles = [css`:host{
 		display: inline-flex;
+		flex-shrink: 0;
 		overflow: hidden;
 		position: relative;
 		touch-action: manipulation;
@@ -71,7 +72,7 @@ export class SchmancyButton extends SchmancyElement {
 	 * while a submit is in flight. Stays focusable; disabled buttons drop from
 	 * the tab order and are unreachable to AT (WCAG 2.2 AA).
 	 */
-	private _formBusyObserver?: MutationObserver
+	private formBusyObserver?: MutationObserver
 
 	constructor() {
 		super()
@@ -128,20 +129,20 @@ export class SchmancyButton extends SchmancyElement {
 			}
 		}
 		sync()
-		this._formBusyObserver = new MutationObserver(sync)
-		this._formBusyObserver.observe(form, { attributes: true, attributeFilter: ['aria-busy'] })
+		this.formBusyObserver = new MutationObserver(sync)
+		this.formBusyObserver.observe(form, { attributes: true, attributeFilter: ['aria-busy'] })
 	}
 
 	override disconnectedCallback(): void {
-		this._formBusyObserver?.disconnect()
-		this._formBusyObserver = undefined
+		this.formBusyObserver?.disconnect()
+		this.formBusyObserver = undefined
 		super.disconnectedCallback()
 	}
 
 	@query('[part="base"]', true)
 	private nativeElement!: HTMLElement
 
-	private _ariaLabel!: string
+	#ariaLabel!: string
 
 	/**
 	 * The variant of the button.
@@ -208,8 +209,8 @@ export class SchmancyButton extends SchmancyElement {
 	public disabled = false
 
 	public override set ariaLabel(value: string) {
-		const oldVal = this._ariaLabel
-		this._ariaLabel = value
+		const oldVal = this.#ariaLabel
+		this.#ariaLabel = value
 
 		if (this.hasAttribute('aria-label')) {
 			this.removeAttribute('aria-label')
@@ -219,7 +220,7 @@ export class SchmancyButton extends SchmancyElement {
 
 	@property({ attribute: 'aria-label' })
 	public override get ariaLabel() {
-		return this._ariaLabel
+		return this.#ariaLabel
 	}
 
 	@queryAssignedElements({
@@ -293,7 +294,7 @@ export class SchmancyButton extends SchmancyElement {
 	}
 
 	// Prevent default behavior when the component is disabled.
-	private _preventDefault(event: Event) {
+	private preventDefault(event: Event) {
 		event.preventDefault()
 		event.stopPropagation()
 	}
@@ -429,7 +430,7 @@ export class SchmancyButton extends SchmancyElement {
 					class="${this.classMap(classes)}"
 					tabindex=${this.disabled ? '-1' : '0'}
 					aria-disabled=${this.disabled}
-					@click=${this.disabled ? this._preventDefault : undefined}
+					@click=${this.disabled ? this.preventDefault : undefined}
 				>
 					${when(!this.disabled, () => html`<div class="${this.classMap(stateLayerClasses)}"></div>`)}
 					<slot name="prefix"></slot>

package/src/button/icon-button.ts

@@ -1,5 +1,5 @@
 import { SchmancyElement } from '@mixins/index'
-import { css, html, LitElement, PropertyValueMap } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { when } from 'lit/directives/when.js'
@@ -17,6 +17,7 @@ export class SchmnacyIconButton extends SchmancyElement {
 	static styles = [css`
 	:host {
 		display: inline-flex;
+		flex-shrink: 0;
 		border-radius: 9999px;
 		transition:
 			box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
@@ -50,7 +51,7 @@ export class SchmnacyIconButton extends SchmancyElement {
 	@query('[part="base"]', true)
 	private nativeElement!: HTMLElement
 
-	private _ariaLabel!: string
+	#ariaLabel!: string
 
 	/**
 	 * The size of the icon.
@@ -123,31 +124,31 @@ export class SchmnacyIconButton extends SchmancyElement {
 	// no slotchange ever fires), or a nested <schmancy-icon> element.
 	// `textContent` flattens through all three.
 	@state()
-	private _capturedIcon?: string
+	private capturedIcon?: string
 
-	private _observer?: MutationObserver
+	private observer?: MutationObserver
 
 	connectedCallback(): void {
 		super.connectedCallback()
-		this._captureIcon()
-		this._observer = new MutationObserver(() => this._captureIcon())
-		this._observer.observe(this, { childList: true, characterData: true, subtree: true })
+		this.captureIcon()
+		this.observer = new MutationObserver(() => this.captureIcon())
+		this.observer.observe(this, { childList: true, characterData: true, subtree: true })
 	}
 
 	disconnectedCallback(): void {
 		super.disconnectedCallback()
-		this._observer?.disconnect()
+		this.observer?.disconnect()
 	}
 
-	private _captureIcon(): void {
+	private captureIcon(): void {
 		if (this.icon || this.text) return
-		this._capturedIcon = this.textContent?.trim() || undefined
+		this.capturedIcon = this.textContent?.trim() || undefined
 	}
 
 	// Manage aria-label manually so that we can always use our internal property.
 	public override set ariaLabel(value: string) {
-		const oldVal = this._ariaLabel
-		this._ariaLabel = value
+		const oldVal = this.#ariaLabel
+		this.#ariaLabel = value
 
 		if (this.hasAttribute('aria-label')) {
 			this.removeAttribute('aria-label')
@@ -157,7 +158,7 @@ export class SchmnacyIconButton extends SchmancyElement {
 
 	@property({ attribute: 'aria-label' })
 	public override get ariaLabel() {
-		return this._ariaLabel
+		return this.#ariaLabel
 	}
 
 	/** Sets focus in the button. */
@@ -175,12 +176,12 @@ export class SchmnacyIconButton extends SchmancyElement {
 	}
 
 	// Prevent default behavior when the component is disabled.
-	private _preventDefault(event: Event) {
+	private preventDefault(event: Event) {
 		event.preventDefault()
 		event.stopPropagation()
 	}
 
-	protected firstUpdated(_changedProperties: PropertyValueMap<unknown> | Map<PropertyKey, unknown>): void {
+	protected firstUpdated(): void {
 		// Add any first-update logic here if needed.
 	}
 
@@ -236,14 +237,14 @@ export class SchmnacyIconButton extends SchmancyElement {
 					class="${this.classMap(classes)}"
 					tabindex=${this.disabled ? '-1' : '0'}
 					aria-disabled=${this.disabled}
-					@click=${this.disabled ? this._preventDefault : undefined}
+					@click=${this.disabled ? this.preventDefault : undefined}
 				>
 					${when(!this.disabled, () => html`<div class="absolute inset-0 ${this.classMap(stateLayerClasses)}"></div>`)}
 					${this.text
 						? html`<slot></slot>`
 						: html`
 							<slot style="display:none"></slot>
-							<schmancy-icon class=${iconSizeClass}>${this.icon || this._capturedIcon}</schmancy-icon>
+							<schmancy-icon class=${iconSizeClass}>${this.icon || this.capturedIcon}</schmancy-icon>
 						`
 					}
 				</a>
@@ -266,7 +267,7 @@ export class SchmnacyIconButton extends SchmancyElement {
 					? html`<slot></slot>`
 					: html`
 						<slot style="display:none"></slot>
-						<schmancy-icon class=${iconSizeClass}>${this.icon || this._capturedIcon}</schmancy-icon>
+						<schmancy-icon class=${iconSizeClass}>${this.icon || this.capturedIcon}</schmancy-icon>
 					`
 				}
 			</button>

package/src/card/card.ts

@@ -156,18 +156,18 @@ export default class SchmancyCard extends SchmancyElement {
 
 	connectedCallback() {
 		super.connectedCallback()
-		this._updateAriaAttributes()
+		this.updateAriaAttributes()
 	}
 
 	updated(changedProperties: Map<string, unknown>) {
 		super.updated(changedProperties)
 		if (changedProperties.has('interactive') || changedProperties.has('disabled')) {
-			this._updateAriaAttributes()
+			this.updateAriaAttributes()
 		}
 	}
 
 	// Consolidate ARIA attribute updates
-	private _updateAriaAttributes() {
+	private updateAriaAttributes() {
 		const isInteractive = this.interactive && !this.disabled
 
 		if (isInteractive) {
@@ -184,7 +184,7 @@ export default class SchmancyCard extends SchmancyElement {
 	}
 
 	// Shared ripple creation logic
-	private _addRipple(x: number, y: number) {
+	private addRipple(x: number, y: number) {
 		const id = this.nextRippleId++
 		this.ripples = [...this.ripples, { x, y, id }]
 
@@ -195,7 +195,7 @@ export default class SchmancyCard extends SchmancyElement {
 	}
 
 	// Shared navigation logic
-	private _navigate() {
+	private navigate() {
 		if (!this.href) return
 
 		if (this.target === '_blank') {
@@ -206,9 +206,9 @@ export default class SchmancyCard extends SchmancyElement {
 	}
 
 	// Combined action trigger (ripple + navigate + event)
-	private _triggerAction(x: number, y: number) {
-		this._addRipple(x, y)
-		this._navigate()
+	private triggerAction(x: number, y: number) {
+		this.addRipple(x, y)
+		this.navigate()
 
 		this.dispatchEvent(
 			new CustomEvent('schmancy-click', {
@@ -223,7 +223,7 @@ export default class SchmancyCard extends SchmancyElement {
 		if (this.disabled || !this.interactive) return
 
 		const rect = this.getBoundingClientRect()
-		this._triggerAction(e.clientX - rect.left, e.clientY - rect.top)
+		this.triggerAction(e.clientX - rect.left, e.clientY - rect.top)
 	}
 
 	private handleKeyDown = (e: KeyboardEvent) => {
@@ -231,22 +231,22 @@ export default class SchmancyCard extends SchmancyElement {
 
 		if (e.key === 'Enter' || e.key === ' ') {
 			e.preventDefault()
-			this._setPressed(true)
+			this.setPressed(true)
 
 			// Simulate click at center
 			const rect = this.getBoundingClientRect()
-			this._triggerAction(rect.width / 2, rect.height / 2)
+			this.triggerAction(rect.width / 2, rect.height / 2)
 		}
 	}
 
 	private handleKeyUp = (e: KeyboardEvent) => {
 		if (e.key === 'Enter' || e.key === ' ') {
-			this._setPressed(false)
+			this.setPressed(false)
 		}
 	}
 
 	// Consolidate pressed state management
-	private _setPressed(pressed: boolean) {
+	private setPressed(pressed: boolean) {
 		this.pressed = pressed
 		if (pressed) {
 			this.setAttribute('pressed', '')
@@ -257,11 +257,11 @@ export default class SchmancyCard extends SchmancyElement {
 
 	private handleMouseDown = () => {
 		if (this.disabled || !this.interactive) return
-		this._setPressed(true)
+		this.setPressed(true)
 	}
 
-	private handleMouseUp = () => this._setPressed(false)
-	private handleMouseLeave = () => this._setPressed(false)
+	private handleMouseUp = () => this.setPressed(false)
+	private handleMouseLeave = () => this.setPressed(false)
 
 	protected render() {
 		const isInteractive = this.interactive && !this.disabled

package/src/content-drawer/drawer.ts

@@ -139,7 +139,7 @@ export class SchmancyContentDrawer extends SchmancyElement {
 		}
 	}
 
-	private _overlaySubscription: Subscription | null = null
+	private overlaySubscription: Subscription | null = null
 
 	private handleRender(detail: TRenderCustomEvent['detail']) {
 		if (this.mode === 'push') {
@@ -155,16 +155,16 @@ export class SchmancyContentDrawer extends SchmancyElement {
 			// `show()` mounts the same component as a modal overlay; subscription
 			// = lifecycle, so dropping the previous one closes any prior modal
 			// before opening the next.
-			this._overlaySubscription?.unsubscribe()
-			this._overlaySubscription = show(detail.component, { props: detail.props })
+			this.overlaySubscription?.unsubscribe()
+			this.overlaySubscription = show(detail.component, { props: detail.props })
 				.pipe(takeUntil(this.disconnecting))
-				.subscribe({ complete: () => { this._overlaySubscription = null } })
+				.subscribe({ complete: () => { this.overlaySubscription = null } })
 		}
 	}
 
 	private dismissOverlay() {
-		this._overlaySubscription?.unsubscribe()
-		this._overlaySubscription = null
+		this.overlaySubscription?.unsubscribe()
+		this.overlaySubscription = null
 	}
 
 	getOffsetTop(element: HTMLElement | null) {