@mhmo91/schmancy 0.10.41 → 0.10.43

package/src/navigation-bar/navigation-bar-item.ts

@@ -30,60 +30,62 @@ import { takeUntil, tap, filter } from 'rxjs/operators'
  */
 @customElement('schmancy-navigation-bar-item')
 export class SchmancyNavigationBarItem extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: flex;
-		flex: 1;
-		min-width: 48px;
-		max-width: 168px;
-		user-select: none;
-		-webkit-tap-highlight-color: transparent;
-	}
+	static styles = [
+		css`
+			:host {
+				display: flex;
+				flex: 1;
+				min-width: 48px;
+				max-width: 168px;
+				user-select: none;
+				-webkit-tap-highlight-color: transparent;
+			}
 
-	:host([disabled]) {
-		pointer-events: none;
-	}
+			:host([disabled]) {
+				pointer-events: none;
+			}
 
-	button {
-		font-family: inherit;
-		border: none;
-		background: none;
-		width: 100%;
-		padding: 0;
-		margin: 0;
-		text-align: center;
-		color: inherit;
-	}
+			button {
+				font-family: inherit;
+				border: none;
+				background: none;
+				width: 100%;
+				padding: 0;
+				margin: 0;
+				text-align: center;
+				color: inherit;
+			}
 
-	button:focus {
-		outline: none;
-	}
+			button:focus {
+				outline: none;
+			}
 
-	button:focus-visible {
-		outline: 2px solid var(--focus-color);
-		outline-offset: 2px;
-		border-radius: 8px;
-	}
+			button:focus-visible {
+				outline: 2px solid var(--focus-color);
+				outline-offset: 2px;
+				border-radius: 8px;
+			}
 
-	/* Ripple animation */
-	@keyframes ripple {
-		to {
-			transform: scale(4);
-			opacity: 0;
-		}
-	}
+			/* Ripple animation */
+			@keyframes ripple {
+				to {
+					transform: scale(4);
+					opacity: 0;
+				}
+			}
 
-	.ripple-effect {
-		position: absolute;
-		border-radius: 50%;
-		width: 20px;
-		height: 20px;
-		background-color: currentColor;
-		opacity: 0.25;
-		animation: ripple 0.6s ease-out;
-		pointer-events: none;
-	}
-`];
+			.ripple-effect {
+				position: absolute;
+				border-radius: 50%;
+				width: 20px;
+				height: 20px;
+				background-color: currentColor;
+				opacity: 0.25;
+				animation: ripple 0.6s ease-out;
+				pointer-events: none;
+			}
+		`,
+	]
 	/**
 	 * Icon name for the navigation item (Material Symbols Outlined)
 	 */
@@ -112,8 +114,12 @@ export class SchmancyNavigationBarItem extends SchmancyElement {
 	 * @default false
 	 */
 	@property({ type: Boolean, reflect: true })
-	get active() { return this.active$.value }
-	set active(value: boolean) { this.active$.next(value) }
+	get active() {
+		return this.active$.value
+	}
+	set active(value: boolean) {
+		this.active$.next(value)
+	}
 
 	/**
 	 * Whether this item is disabled
@@ -148,17 +154,19 @@ export class SchmancyNavigationBarItem extends SchmancyElement {
 			const ripple = {
 				x: event.clientX - rect.left,
 				y: event.clientY - rect.top,
-				id: Date.now()
+				id: Date.now(),
 			}
 			this.ripples = [...this.ripples, ripple]
 
 			// Remove ripple after animation
-			timer(600).pipe(
-				tap(() => {
-					this.ripples = this.ripples.filter(r => r.id !== ripple.id)
-				}),
-				takeUntil(this.disconnecting)
-			).subscribe()
+			timer(600)
+				.pipe(
+					tap(() => {
+						this.ripples = this.ripples.filter(r => r.id !== ripple.id)
+					}),
+					takeUntil(this.disconnecting),
+				)
+				.subscribe()
 		}
 	}
 
@@ -202,9 +210,7 @@ export class SchmancyNavigationBarItem extends SchmancyElement {
 		super.connectedCallback()
 
 		// Subscribe to active state changes
-		this.active$.pipe(
-			takeUntil(this.disconnecting)
-		).subscribe(() => {
+		this.active$.pipe(takeUntil(this.disconnecting)).subscribe(() => {
 			this.requestUpdate()
 		})
 
@@ -220,33 +226,35 @@ export class SchmancyNavigationBarItem extends SchmancyElement {
 		if (!button) return
 
 		// Create click stream
-		const click$ = fromEvent<MouseEvent>(button, 'click').pipe(
-			filter(() => !this.disabled)
-		)
+		const click$ = fromEvent<MouseEvent>(button, 'click').pipe(filter(() => !this.disabled))
 
 		// Create keyboard activation stream (Enter/Space)
 		const keyActivation$ = fromEvent<KeyboardEvent>(button, 'keydown').pipe(
 			filter(() => !this.disabled),
 			filter(event => event.key === 'Enter' || event.key === ' '),
-			tap(event => event.preventDefault())
+			tap(event => event.preventDefault()),
 		)
 
 		// Merge click and keyboard streams for instant navigation
-		merge(click$, keyActivation$).pipe(
-			tap(() => {
-				// Dispatch navigation event
-				this.dispatchEvent(new CustomEvent('bar-item-click', {
-					detail: {
-						icon: this.icon,
-						label: this.label,
-						active: this.active
-					},
-					bubbles: true,
-					composed: true
-				}))
-			}),
-			takeUntil(this.disconnecting)
-		).subscribe()
+		merge(click$, keyActivation$)
+			.pipe(
+				tap(() => {
+					// Dispatch navigation event
+					this.dispatchEvent(
+						new CustomEvent('bar-item-click', {
+							detail: {
+								icon: this.icon,
+								label: this.label,
+								active: this.active,
+							},
+							bubbles: true,
+							composed: true,
+						}),
+					)
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 	}
 
 	/**
@@ -279,13 +287,13 @@ export class SchmancyNavigationBarItem extends SchmancyElement {
 		// Main container classes - now the clickable area
 		const containerClasses = {
 			'relative flex flex-col items-center justify-center': true,
-			'flex-1 min-w-[48px] max-w-[168px]': true,  // Fill available space
+			'flex-1 min-w-[48px] max-w-[168px]': true, // Fill available space
 			'py-2 px-1 cursor-pointer': !this.disabled,
 			'transition-all duration-200': true,
 			'hover:bg-surface-containerHigh': !this.disabled && !this.active,
 			'cursor-not-allowed opacity-38': this.disabled,
 			'outline-none': true,
-			'focus-visible:outline-2 focus-visible:outline-offset-2': true
+			'focus-visible:outline-2 focus-visible:outline-offset-2': true,
 		}
 
 		// Icon indicator - just visual, not clickable
@@ -295,14 +303,14 @@ export class SchmancyNavigationBarItem extends SchmancyElement {
 			'transition-all duration-200': true,
 			'bg-secondary-container': this.active,
 			'group-hover:bg-surface-containerHighest': !this.active && !this.disabled,
-			'relative overflow-hidden': true
+			'relative overflow-hidden': true,
 		}
 
 		const labelClasses = {
 			'text-xs font-medium leading-4 mt-1': true,
 			'text-center max-w-full': true,
 			'overflow-hidden text-ellipsis whitespace-nowrap': true,
-			'transition-all duration-200': true
+			'transition-all duration-200': true,
 		}
 
 		const badgeClasses = {
@@ -314,21 +322,21 @@ export class SchmancyNavigationBarItem extends SchmancyElement {
 			'flex items-center justify-center': showBadgeText,
 			'px-1': showBadgeText,
 			'transition-all duration-200': true,
-			'z-10': true
+			'z-10': true,
 		}
 
 		// Determine colors
 		const containerColors = this.active
 			? {
-					color: SchmancyTheme.sys.color.secondary.onContainer
-			  }
+					color: SchmancyTheme.sys.color.secondary.onContainer,
+				}
 			: {
-					color: SchmancyTheme.sys.color.surface.onVariant
-			  }
+					color: SchmancyTheme.sys.color.surface.onVariant,
+				}
 
 		// Set CSS variables for focus state
 		const styleVars = {
-			'--focus-color': SchmancyTheme.sys.color.primary.default
+			'--focus-color': SchmancyTheme.sys.color.primary.default,
 		}
 
 		return html`
@@ -342,7 +350,7 @@ export class SchmancyNavigationBarItem extends SchmancyElement {
 				aria-label=${this.label || 'Navigation item'}
 				style=${this.styleMap({
 					...styleVars,
-					'outline-color': 'var(--focus-color)'
+					'outline-color': 'var(--focus-color)',
 				})}
 				${color(containerColors)}
 			>
@@ -356,12 +364,11 @@ export class SchmancyNavigationBarItem extends SchmancyElement {
 								style=${this.styleMap({
 									left: `${ripple.x}px`,
 									top: `${ripple.y}px`,
-									transform: 'translate(-50%, -50%)'
+									transform: 'translate(-50%, -50%)',
 								})}
 							></span>
-						`
+						`,
 					)}
-
 					${hasCustomIcon
 						? html`<slot name="icon"></slot>`
 						: this.icon
@@ -374,38 +381,40 @@ export class SchmancyNavigationBarItem extends SchmancyElement {
 									>
 										${this.icon}
 									</schmancy-icon>
-							  `
+								`
 							: hasSlotContent
 								? html`<slot></slot>`
 								: ''}
 				</div>
 
 				<!-- Label below icon -->
-				${!this.hideLabels && this.label ? html`
-					<span class=${this.classMap(labelClasses)}>${this.label}</span>
-				` : ''}
+				${!this.hideLabels && this.label ? html` <span class=${this.classMap(labelClasses)}>${this.label}</span> ` : ''}
 
 				<!-- Badge -->
-				${showBadgeText ? html`
-					<span
-						class=${this.classMap(badgeClasses)}
-						aria-label="${badgeText} notifications"
-						${color({
-							bgColor: SchmancyTheme.sys.color.error.default,
-							color: SchmancyTheme.sys.color.error.on
-						})}
-					>
-						<span class="text-[10px] font-medium leading-none">${badgeText}</span>
-					</span>
-				` : this.badge ? html`
-					<span
-						class=${this.classMap(badgeClasses)}
-						aria-label="Has notifications"
-						${color({
-							bgColor: SchmancyTheme.sys.color.error.default
-						})}
-					></span>
-				` : ''}
+				${showBadgeText
+					? html`
+							<span
+								class=${this.classMap(badgeClasses)}
+								aria-label="${badgeText} notifications"
+								${color({
+									bgColor: SchmancyTheme.sys.color.error.default,
+									color: SchmancyTheme.sys.color.error.on,
+								})}
+							>
+								<span class="text-[10px] font-medium leading-none">${badgeText}</span>
+							</span>
+						`
+					: this.badge
+						? html`
+								<span
+									class=${this.classMap(badgeClasses)}
+									aria-label="Has notifications"
+									${color({
+										bgColor: SchmancyTheme.sys.color.error.default,
+									})}
+								></span>
+							`
+						: ''}
 			</button>
 		`
 	}
@@ -415,4 +424,4 @@ declare global {
 	interface HTMLElementTagNameMap {
 		'schmancy-navigation-bar-item': SchmancyNavigationBarItem
 	}
-}
+}

package/src/navigation-bar/navigation-bar.ts

@@ -50,28 +50,30 @@ const MOBILE_BREAKPOINT = '(max-width: 767px)'
  */
 @customElement('schmancy-navigation-bar')
 export class SchmancyNavigationBar extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-		transition: transform 0.3s ease-in-out;
-	}
+	static styles = [
+		css`
+			:host {
+				display: block;
+				transition: transform 0.3s ease-in-out;
+			}
 
-	:host([hide-on-scroll]) {
-		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-	}
+			:host([hide-on-scroll]) {
+				transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+			}
 
-	/* Support 3-7 items with equal distribution */
-	::slotted(schmancy-navigation-bar-item) {
-		flex: 1;
-		max-width: 168px; /* Prevent items from being too wide */
-	}
+			/* Support 3-7 items with equal distribution */
+			::slotted(schmancy-navigation-bar-item) {
+				flex: 1;
+				max-width: 168px; /* Prevent items from being too wide */
+			}
 
-	/* Accessibility focus indicators */
-	:host(:focus-within) {
-		outline: 2px solid var(--schmancy-sys-color-primary);
-		outline-offset: -2px;
-	}
-`];
+			/* Accessibility focus indicators */
+			:host(:focus-within) {
+				outline: 2px solid var(--schmancy-sys-color-primary);
+				outline-offset: -2px;
+			}
+		`,
+	]
 	/**
 	 * Observable for active index state
 	 */
@@ -82,8 +84,12 @@ export class SchmancyNavigationBar extends SchmancyElement {
 	 * @default -1
 	 */
 	@property({ type: Number })
-	get activeIndex() { return this.activeIndex$.value }
-	set activeIndex(value: number) { this.activeIndex$.next(value) }
+	get activeIndex() {
+		return this.activeIndex$.value
+	}
+	set activeIndex(value: number) {
+		this.activeIndex$.next(value)
+	}
 
 	/**
 	 * Hide labels and show only icons
@@ -106,7 +112,6 @@ export class SchmancyNavigationBar extends SchmancyElement {
 	@property({ type: Boolean, reflect: true })
 	hideOnScroll = false
 
-
 	/**
 	 * Current focused item index for keyboard navigation
 	 */
@@ -131,10 +136,9 @@ export class SchmancyNavigationBar extends SchmancyElement {
 	private getItems(): SchmancyNavigationBarItem[] {
 		const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement | null
 		if (!slot) return []
-		return slot.assignedElements({ flatten: true })
-			.filter((el): el is SchmancyNavigationBarItem =>
-				el.tagName.toLowerCase() === 'schmancy-navigation-bar-item'
-			)
+		return slot
+			.assignedElements({ flatten: true })
+			.filter((el): el is SchmancyNavigationBarItem => el.tagName.toLowerCase() === 'schmancy-navigation-bar-item')
 	}
 
 	/**
@@ -174,40 +178,46 @@ export class SchmancyNavigationBar extends SchmancyElement {
 		this.mobileMediaQuery = window.matchMedia(MOBILE_BREAKPOINT)
 
 		// Listen to viewport changes
-		fromEvent<MediaQueryListEvent>(this.mobileMediaQuery, 'change').pipe(
-			tap(() => this.updateBottomOffset()),
-			takeUntil(this.disconnecting)
-		).subscribe()
+		fromEvent<MediaQueryListEvent>(this.mobileMediaQuery, 'change')
+			.pipe(
+				tap(() => this.updateBottomOffset()),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 
 		// Subscribe to fullscreen observable
-		theme.fullscreen$.pipe(
-			tap(isFullscreen => {
-				this.isFullscreen = isFullscreen
-				this.visibility$.next(!this.isFullscreen && !this.isHiddenByScroll)
-				this.updateBottomOffset()
-			}),
-			takeUntil(this.disconnecting)
-		).subscribe()
+		theme.fullscreen$
+			.pipe(
+				tap(isFullscreen => {
+					this.isFullscreen = isFullscreen
+					this.visibility$.next(!this.isFullscreen && !this.isHiddenByScroll)
+					this.updateBottomOffset()
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 
 		// Initial offset update
 		this.updateBottomOffset()
 
 		// Listen to bar-item-click events using RxJS
-		fromEvent(this, 'bar-item-click').pipe(
-			tap((event: Event) => this.handleItemClick(event as CustomEvent)),
-			takeUntil(this.disconnecting)
-		).subscribe()
+		fromEvent(this, 'bar-item-click')
+			.pipe(
+				tap((event: Event) => this.handleItemClick(event as CustomEvent)),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 
 		// Listen to keydown events using RxJS
-		fromEvent(this, 'keydown').pipe(
-			tap((event: Event) => this.handleKeyDown(event as KeyboardEvent)),
-			takeUntil(this.disconnecting)
-		).subscribe()
+		fromEvent(this, 'keydown')
+			.pipe(
+				tap((event: Event) => this.handleKeyDown(event as KeyboardEvent)),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 
 		// Subscribe to active index changes
-		this.activeIndex$.pipe(
-			takeUntil(this.disconnecting)
-		).subscribe(index => {
+		this.activeIndex$.pipe(takeUntil(this.disconnecting)).subscribe(index => {
 			this.updateActiveStates(index)
 		})
 
@@ -231,38 +241,39 @@ export class SchmancyNavigationBar extends SchmancyElement {
 	 */
 	private setupScrollListener() {
 		// Create scroll observable
-		fromEvent(window, 'scroll').pipe(
-			throttleTime(100), // Throttle for performance
-			map(() => window.scrollY),
-			pairwise(), // Get pairs of [previous, current] scroll positions
-			filter(([prev, curr]) => Math.abs(curr - prev) > this.SCROLL_THRESHOLD), // Only react if scrolled enough
-			tap(([prev, curr]) => {
-				const scrollingDown = curr > prev
-				const scrollingUp = curr < prev
-				const previousHiddenState = this.isHiddenByScroll
-
-				// Hide when scrolling down, show when scrolling up
-				if (scrollingDown && !this.isHiddenByScroll) {
-					this.isHiddenByScroll = true
-				} else if (scrollingUp && this.isHiddenByScroll) {
-					this.isHiddenByScroll = false
-				}
-
-				// Always show when near top
-				if (curr <= this.SCROLL_THRESHOLD) {
-					this.isHiddenByScroll = false
-				}
-
-				// Update visibility if scroll state changed
-				if (previousHiddenState !== this.isHiddenByScroll) {
-					this.visibility$.next(!this.isHiddenByScroll && !this.isFullscreen)
-				}
-			}),
-			takeUntil(this.disconnecting)
-		).subscribe()
+		fromEvent(window, 'scroll')
+			.pipe(
+				throttleTime(100), // Throttle for performance
+				map(() => window.scrollY),
+				pairwise(), // Get pairs of [previous, current] scroll positions
+				filter(([prev, curr]) => Math.abs(curr - prev) > this.SCROLL_THRESHOLD), // Only react if scrolled enough
+				tap(([prev, curr]) => {
+					const scrollingDown = curr > prev
+					const scrollingUp = curr < prev
+					const previousHiddenState = this.isHiddenByScroll
+
+					// Hide when scrolling down, show when scrolling up
+					if (scrollingDown && !this.isHiddenByScroll) {
+						this.isHiddenByScroll = true
+					} else if (scrollingUp && this.isHiddenByScroll) {
+						this.isHiddenByScroll = false
+					}
+
+					// Always show when near top
+					if (curr <= this.SCROLL_THRESHOLD) {
+						this.isHiddenByScroll = false
+					}
+
+					// Update visibility if scroll state changed
+					if (previousHiddenState !== this.isHiddenByScroll) {
+						this.visibility$.next(!this.isHiddenByScroll && !this.isFullscreen)
+					}
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 	}
 
-
 	/**
 	 * Handle item click events
 	 */
@@ -290,15 +301,17 @@ export class SchmancyNavigationBar extends SchmancyElement {
 		this.activeIndex = index
 
 		// Emit navigation change event
-		this.dispatchEvent(new CustomEvent('navigation-change', {
-			detail: {
-				oldIndex,
-				newIndex: index,
-				item: clickedItem
-			},
-			bubbles: true,
-			composed: true
-		}))
+		this.dispatchEvent(
+			new CustomEvent('navigation-change', {
+				detail: {
+					oldIndex,
+					newIndex: index,
+					item: clickedItem,
+				},
+				bubbles: true,
+				composed: true,
+			}),
+		)
 	}
 
 	/**
@@ -369,7 +382,6 @@ export class SchmancyNavigationBar extends SchmancyElement {
 		}
 	}
 
-
 	/**
 	 * Add a boat item to the navigation bar
 	 * @param config Configuration for the boat item
@@ -460,7 +472,7 @@ export class SchmancyNavigationBar extends SchmancyElement {
 				style="transform: ${transformStyle};"
 				${color({
 					bgColor: SchmancyTheme.sys.color.surface.container,
-					color: SchmancyTheme.sys.color.surface.on
+					color: SchmancyTheme.sys.color.surface.on,
 				})}
 			>
 				<slot></slot>
@@ -473,4 +485,4 @@ declare global {
 	interface HTMLElementTagNameMap {
 		'schmancy-navigation-bar': SchmancyNavigationBar
 	}
-}
+}

package/src/navigation-rail/index.ts

@@ -1,2 +1,2 @@
-export * from './navigation-rail-item';
-export * from './navigation-rail';
+export * from './navigation-rail-item'
+export * from './navigation-rail'