@mhmo91/schmancy 0.10.42 → 0.10.43

package/src/lightbox/lightbox.directive.ts

@@ -73,7 +73,8 @@ class LightboxDirective extends AsyncDirective {
 	private open() {
 		// Create overlay container with flex centering
 		this.overlayElement = document.createElement('div')
-		this.overlayElement.className = 'fixed inset-0 flex items-center justify-center opacity-0 bg-black/95 backdrop-blur-sm'
+		this.overlayElement.className =
+			'fixed inset-0 flex items-center justify-center opacity-0 bg-black/95 backdrop-blur-sm'
 		this.overlayElement.style.zIndex = '1000'
 
 		// Render lightbox content using Lit

package/src/lightbox/lightbox.ts

@@ -9,11 +9,13 @@ import { overlayStack } from '../utils/overlay-stack'
 
 @customElement('schmancy-lightbox')
 export class SchmancyLightbox extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: contents;
-	}
-`]
+	static styles = [
+		css`
+			:host {
+				display: contents;
+			}
+		`,
+	]
 
 	@property({ type: String }) src: string = ''
 	@property({ type: Array }) images: string[] = []
@@ -81,17 +83,11 @@ export class SchmancyLightbox extends SchmancyElement {
 			overlay.style.opacity = '0'
 
 			// Animate to visible state
-			overlay.animate(
-				[
-					{ opacity: 0 },
-					{ opacity: 1 },
-				],
-				{
-					duration: 300,
-					easing: 'cubic-bezier(0.25, 1, 0.5, 1)',
-					fill: 'forwards',
-				},
-			)
+			overlay.animate([{ opacity: 0 }, { opacity: 1 }], {
+				duration: 300,
+				easing: 'cubic-bezier(0.25, 1, 0.5, 1)',
+				fill: 'forwards',
+			})
 
 			// Manually set background color after a tick
 			requestAnimationFrame(() => {
@@ -164,18 +160,12 @@ export class SchmancyLightbox extends SchmancyElement {
 		}
 
 		if (overlay) {
-			const animation = overlay.animate(
-				[
-					{ opacity: 1 },
-					{ opacity: 0 },
-				],
-				{
-					duration: 250,
-					delay: 50,
-					easing: 'ease-out',
-					fill: 'forwards',
-				},
-			)
+			const animation = overlay.animate([{ opacity: 1 }, { opacity: 0 }], {
+				duration: 250,
+				delay: 50,
+				easing: 'ease-out',
+				fill: 'forwards',
+			})
 
 			animation.onfinish = () => {
 				// Reset background color
@@ -341,14 +331,8 @@ export class SchmancyLightbox extends SchmancyElement {
 					${when(
 						this.isGalleryMode && this.images.length > 1,
 						() => html`
-							<div
-								class="absolute top-0 bottom-0 left-0 w-1/3 cursor-pointer z-5"
-								@click=${this.handlePrevious}
-							></div>
-							<div
-								class="absolute top-0 bottom-0 right-0 w-1/3 cursor-pointer z-5"
-								@click=${this.handleNext}
-							></div>
+							<div class="absolute top-0 bottom-0 left-0 w-1/3 cursor-pointer z-5" @click=${this.handlePrevious}></div>
+							<div class="absolute top-0 bottom-0 right-0 w-1/3 cursor-pointer z-5" @click=${this.handleNext}></div>
 						`,
 					)}
 
@@ -365,8 +349,7 @@ export class SchmancyLightbox extends SchmancyElement {
 					<!-- Main Image -->
 					<img
 						${ref(this.imageRef)}
-						class="max-w-[90vw] max-h-[90vh] object-contain rounded select-none touch-pinch-zoom ${this
-							.isGalleryMode
+						class="max-w-[90vw] max-h-[90vh] object-contain rounded select-none touch-pinch-zoom ${this.isGalleryMode
 							? 'cursor-default'
 							: 'cursor-pointer'}"
 						.src=${this.currentImageSrc}

package/src/list/index.ts

@@ -1,3 +1,3 @@
-export * from './context'
-export * from './list-item'
-export * from './list'
+export * from './context'
+export * from './list-item'
+export * from './list'

package/src/list/list-item.ts

@@ -13,32 +13,38 @@ import { customElement, property, queryAssignedElements } from 'lit/decorators.j
  */
 @customElement('schmancy-list-item')
 export class SchmancyListItem extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-		border-radius: 0.5rem;
-		transition:
-			background 200ms ease,
-			box-shadow 300ms ease,
-			transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
-	}
-	:host(:hover:not([readonly])) {
-		background: color-mix(in srgb, var(--schmancy-sys-color-surface-on) 8%, transparent);
-		box-shadow: 0 2px 8px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 10%, transparent);
-	}
-	:host(:active:not([readonly])) {
-		transform: scale(0.98);
-		transition-duration: 100ms;
-	}
-	:host([selected]) {
-		background: color-mix(in srgb, var(--schmancy-sys-color-secondary-container) 30%, transparent);
-		box-shadow: 0 0 10px -3px color-mix(in srgb, var(--schmancy-sys-color-secondary-default) 12%, transparent);
-	}
-	@media (prefers-reduced-motion: reduce) {
-		:host { transition: background 200ms ease; }
-		:host(:active:not([readonly])) { transform: none; }
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: block;
+				border-radius: 0.5rem;
+				transition:
+					background 200ms ease,
+					box-shadow 300ms ease,
+					transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+			}
+			:host(:hover:not([readonly])) {
+				background: color-mix(in srgb, var(--schmancy-sys-color-surface-on) 8%, transparent);
+				box-shadow: 0 2px 8px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 10%, transparent);
+			}
+			:host(:active:not([readonly])) {
+				transform: scale(0.98);
+				transition-duration: 100ms;
+			}
+			:host([selected]) {
+				background: color-mix(in srgb, var(--schmancy-sys-color-secondary-container) 30%, transparent);
+				box-shadow: 0 0 10px -3px color-mix(in srgb, var(--schmancy-sys-color-secondary-default) 12%, transparent);
+			}
+			@media (prefers-reduced-motion: reduce) {
+				:host {
+					transition: background 200ms ease;
+				}
+				:host(:active:not([readonly])) {
+					transform: none;
+				}
+			}
+		`,
+	]
 	@consume({ context: SchmancySurfaceTypeContext, subscribe: true })
 	@property()
 	variant: TSurfaceColor

package/src/list/list.ts

@@ -22,13 +22,15 @@ import { SchmancyListTypeContext } from './context'
  */
 @customElement('schmancy-list')
 export class List extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-		padding-top: 8px;
-		padding-bottom: 8px;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: block;
+				padding-top: 8px;
+				padding-bottom: 8px;
+			}
+		`,
+	]
 	/**
 	 * Defines the type or color of the surface used by the component.
 	 * This value is provided to descendant components via context.
@@ -61,7 +63,10 @@ export class List extends SchmancyElement {
 	 */
 	render() {
 		return html`
-			<schmancy-surface class=${(['', 'shadow-sm', 'shadow', 'shadow-md', 'shadow-lg', 'shadow-2xl'] as const)[this.elevation]} type=${this.surface}>
+			<schmancy-surface
+				class=${(['', 'shadow-sm', 'shadow', 'shadow-md', 'shadow-lg', 'shadow-2xl'] as const)[this.elevation]}
+				type=${this.surface}
+			>
 				<ul>
 					<slot></slot>
 				</ul>

package/src/menu/index.ts

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

package/src/menu/menu-item.ts

@@ -4,11 +4,13 @@ import { customElement } from 'lit/decorators.js'
 
 @customElement('schmancy-menu-item')
 export default class SchmancyMenuItem extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-	}
-`]
+	static styles = [
+		css`
+			:host {
+				display: block;
+			}
+		`,
+	]
 
 	private dismissParentMenu = (): void => {
 		// Bubbling 'close' is the protocol the overlay `show()` watches; the

package/src/menu/menu.ts

@@ -38,12 +38,14 @@ import { show } from '../overlay/overlay.service'
  */
 @customElement('schmancy-menu')
 export default class SchmancyMenu extends SchmancyElement {
-	static styles = [css`
-	:host {
-		position: relative;
-		display: flex;
-	}
-`]
+	static styles = [
+		css`
+			:host {
+				position: relative;
+				display: flex;
+			}
+		`,
+	]
 
 	@query('slot:not([name])')
 	private menuSlot!: HTMLSlotElement

package/src/nav-drawer/appbar.ts

@@ -8,13 +8,15 @@ import { customElement } from 'lit/decorators.js'
  */
 @customElement('schmancy-nav-drawer-appbar')
 export class SchmancyDrawerAppbar extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-		width: 100%;
-		min-width: 0;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				min-width: 0;
+			}
+		`,
+	]
 	render() {
 		return html`<slot></slot>`
 	}

package/src/nav-drawer/content.ts

@@ -5,14 +5,16 @@ import { fromEvent, takeUntil } from 'rxjs'
 
 @customElement('schmancy-nav-drawer-content')
 export class SchmancyNavigationDrawerContent extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-		position: relative;
-		inset: 0;
-		overflow-y: auto;
-	}
-`]
+	static styles = [
+		css`
+			:host {
+				display: block;
+				position: relative;
+				inset: 0;
+				overflow-y: auto;
+			}
+		`,
+	]
 
 	connectedCallback(): void {
 		super.connectedCallback()

package/src/nav-drawer/drawer.ts

@@ -17,26 +17,28 @@ import {
  */
 @customElement('schmancy-nav-drawer')
 export class SchmancyNavigationDrawer extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: grid;
-		grid-template-columns: auto 1fr;
-		grid-template-rows: 1fr;
-		flex-grow: 1;
-		height: 100%;
-		overflow: hidden;
-		/* Initially hide the component until it's ready */
-		visibility: hidden;
-	}
+	static styles = [
+		css`
+			:host {
+				display: grid;
+				grid-template-columns: auto 1fr;
+				grid-template-rows: 1fr;
+				flex-grow: 1;
+				height: 100%;
+				overflow: hidden;
+				/* Initially hide the component until it's ready */
+				visibility: hidden;
+			}
 
-	:host([data-ready]) {
-		visibility: visible;
-	}
+			:host([data-ready]) {
+				visibility: visible;
+			}
 
-	:host([fullscreen]) {
-		grid-template-columns: 1fr;
-	}
-`]
+			:host([fullscreen]) {
+				grid-template-columns: 1fr;
+			}
+		`,
+	]
 
 	@property({ type: Boolean, reflect: true })
 	fullscreen: boolean = false
@@ -85,13 +87,15 @@ export class SchmancyNavigationDrawer extends SchmancyElement {
 				}
 			})
 
-		fromEvent(window, 'fullscreen').pipe(
-			tap((event: Event) => {
-				const customEvent = event as CustomEvent
-				this.fullscreen = customEvent.detail
-			}),
-			takeUntil(this.disconnecting)
-		).subscribe()
+		fromEvent(window, 'fullscreen')
+			.pipe(
+				tap((event: Event) => {
+					const customEvent = event as CustomEvent
+					this.fullscreen = customEvent.detail
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
 
 		fromEvent(window, SchmancyEvents.NavDrawer_toggle)
 			.pipe(

package/src/nav-drawer/index.ts

@@ -1,6 +1,6 @@
-export * from './$navbar';
-export * from './appbar';
-export * from './content';
-export * from './context';
-export * from './drawer';
-export * from './navbar';
+export * from './$navbar'
+export * from './appbar'
+export * from './content'
+export * from './context'
+export * from './drawer'
+export * from './navbar'

package/src/navigation-bar/index.ts

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