@mhmo91/schmancy 0.10.42 → 0.10.44

package/src/expand/expand-root.component.ts

@@ -9,45 +9,49 @@ import '../surface/surface.js'
 
 @customElement('schmancy-expand-root')
 export class SchmancyExpandRoot extends SurfaceMixin(SchmancyElement) {
-	static styles = [css`
-	:host {
-		display: contents;
-	}
+	static styles = [
+		css`
+			:host {
+				display: contents;
+			}
 
-	.portal-panel {
-		position: fixed;
-		transform-origin: top left;
-		will-change: clip-path, opacity;
-		border-radius: 1rem;
-		box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
-		z-index: 9999;
-	}
+			.portal-panel {
+				position: fixed;
+				transform-origin: top left;
+				will-change: clip-path, opacity;
+				border-radius: 1rem;
+				box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
+				z-index: 9999;
+			}
 
-	.minimize-btn {
-		position: absolute;
-		top: 0.5rem;
-		right: 0.5rem;
-		z-index: 1;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 2rem;
-		height: 2rem;
-		border-radius: 9999px;
-		border: none;
-		background: transparent;
-		cursor: pointer;
-		opacity: 0.5;
-		transition: opacity 150ms, background 150ms;
-		color: inherit;
-	}
+			.minimize-btn {
+				position: absolute;
+				top: 0.5rem;
+				right: 0.5rem;
+				z-index: 1;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 2rem;
+				height: 2rem;
+				border-radius: 9999px;
+				border: none;
+				background: transparent;
+				cursor: pointer;
+				opacity: 0.5;
+				transition:
+					opacity 150ms,
+					background 150ms;
+				color: inherit;
+			}
 
-	.minimize-btn:hover {
-		opacity: 1;
-		background: rgb(0 0 0 / 0.08);
-	}
-`];
-	@property({ reflect: true }) override type: TSurfaceColor = 'solid'
+			.minimize-btn:hover {
+				opacity: 1;
+				background: rgb(0 0 0 / 0.08);
+			}
+		`,
+	]
+	@property({ reflect: true }) override type: TSurfaceColor = 'containerLowest'
 	@state() isOpen = false
 	private summaryRect: DOMRect | null = null
 
@@ -242,31 +246,36 @@ export class SchmancyExpandRoot extends SurfaceMixin(SchmancyElement) {
 		if (!this.isOpen) return nothing
 
 		return html`
-			${this.backdrop ? html`
-				<div
-					${ref(this.backdropRef)}
-					class="fixed inset-0 z-9998 backdrop-blur-sm backdrop-saturate-150 backdrop-brightness-105 bg-black/[0.07] will-change-[opacity]"
-					@click=${() => this.owner?.close?.()}
-				></div>
-			` : nothing}
-			<schmancy-surface
-				${ref(this.panelRef)}
-				class="portal-panel"
-				type=${this.type}
-				style="overflow-y: auto;"
-			>
-				${!this.hideIndicator ? html`
-					<button
-						${ref(this.btnRef)}
-						class="minimize-btn"
-						aria-label="Minimize"
-						@click=${() => this.owner?.close?.()}
-					>
-						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-							<path d="M19 9L12 16L5 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-						</svg>
-					</button>
-				` : nothing}
+			${this.backdrop
+				? html`
+						<div
+							${ref(this.backdropRef)}
+							class="fixed inset-0 z-9998 backdrop-blur-sm backdrop-saturate-150 backdrop-brightness-105 bg-black/[0.07] will-change-[opacity]"
+							@click=${() => this.owner?.close?.()}
+						></div>
+					`
+				: nothing}
+			<schmancy-surface ${ref(this.panelRef)} class="portal-panel" type=${this.type} style="overflow-y: auto;">
+				${!this.hideIndicator
+					? html`
+							<button
+								${ref(this.btnRef)}
+								class="minimize-btn"
+								aria-label="Minimize"
+								@click=${() => this.owner?.close?.()}
+							>
+								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+									<path
+										d="M19 9L12 16L5 9"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+								</svg>
+							</button>
+						`
+					: nothing}
 				<slot></slot>
 			</schmancy-surface>
 		`

package/src/expand/expand.component.ts

@@ -14,39 +14,42 @@ export const SCHMANCY_EXPAND_REQUEST_CLOSE = 'schmancy-expand-request-close'
 
 @customElement('schmancy-expand')
 export default class SchmancyExpand extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-	}
-
-	summary::-webkit-details-marker {
-		display: none;
-	}
-
-	summary {
-		list-style: none;
-		color: inherit;
-	}
-
-	.inline-grid {
-		display: grid;
-		grid-template-rows: 0fr;
-		overflow: hidden;
-		transition: grid-template-rows 300ms cubic-bezier(0.22, 1.25, 0.36, 1),
-		            opacity 300ms cubic-bezier(0.22, 1.25, 0.36, 1);
-		opacity: 0;
-	}
-
-	.inline-grid[data-open] {
-		grid-template-rows: 1fr;
-		opacity: 1;
-	}
-
-	.inline-grid > .inner {
-		min-height: 0;
-		overflow: hidden;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: block;
+			}
+
+			summary::-webkit-details-marker {
+				display: none;
+			}
+
+			summary {
+				list-style: none;
+				color: inherit;
+			}
+
+			.inline-grid {
+				display: grid;
+				grid-template-rows: 0fr;
+				overflow: hidden;
+				transition:
+					grid-template-rows 300ms cubic-bezier(0.22, 1.25, 0.36, 1),
+					opacity 300ms cubic-bezier(0.22, 1.25, 0.36, 1);
+				opacity: 0;
+			}
+
+			.inline-grid[data-open] {
+				grid-template-rows: 1fr;
+				opacity: 1;
+			}
+
+			.inline-grid > .inner {
+				min-height: 0;
+				overflow: hidden;
+			}
+		`,
+	]
 	@property() summary = ''
 
 	@property({ type: Boolean, reflect: true }) open = false
@@ -242,7 +245,9 @@ export default class SchmancyExpand extends SchmancyElement {
 				>
 					${!this.hideIndicator
 						? html`
-								<span class="indicator flex items-center justify-center w-5 h-5 rounded-full shrink-0 opacity-70 group-hover:opacity-100 will-change-transform">
+								<span
+									class="indicator flex items-center justify-center w-5 h-5 rounded-full shrink-0 opacity-70 group-hover:opacity-100 will-change-transform"
+								>
 									<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
 										<path
 											d="M9 6L15 12L9 18"
@@ -265,17 +270,17 @@ export default class SchmancyExpand extends SchmancyElement {
 
 				${this.inline
 					? html`
-						<div class="inline-grid" ?data-open=${this.open}>
-							<div class="inner">
-								<slot ${ref(this.contentSlotRef)}></slot>
+							<div class="inline-grid" ?data-open=${this.open}>
+								<div class="inner">
+									<slot ${ref(this.contentSlotRef)}></slot>
+								</div>
 							</div>
-						</div>
-					`
+						`
 					: html`
-						<div style=${styleMap(this.open ? {} : { display: 'none' })}>
-							<slot ${ref(this.contentSlotRef)}></slot>
-						</div>
-					`}
+							<div style=${styleMap(this.open ? {} : { display: 'none' })}>
+								<slot ${ref(this.contentSlotRef)}></slot>
+							</div>
+						`}
 			</div>
 		`
 	}

package/src/fab/fab.test.ts

@@ -6,8 +6,7 @@ import type { SchmancyFab } from './fab'
 
 const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
 
-const base = (fab: SchmancyFab) =>
-	fab.shadowRoot!.querySelector('[part="base"]') as HTMLButtonElement
+const base = (fab: SchmancyFab) => fab.shadowRoot!.querySelector('[part="base"]') as HTMLButtonElement
 
 describe('schmancy-fab — M3 contract', () => {
 	let host: HTMLDivElement

package/src/fab/fab.ts

@@ -181,8 +181,7 @@ export class SchmancyFab extends SchmancyElement {
 
 	render() {
 		const classes = {
-			'relative z-0 flex items-center justify-center overflow-hidden border-0 cursor-pointer outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-secondary-default':
-				true,
+			'relative z-0 flex items-center justify-center overflow-hidden border-0 cursor-pointer outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-secondary-default': true,
 			// M3 container — fixed square per size, content-width when extended
 			'size-10': !this.extended && this.size === 'small',
 			'size-14': !this.extended && this.size === 'medium',
@@ -196,8 +195,7 @@ export class SchmancyFab extends SchmancyElement {
 		}
 
 		const stateLayerClasses = {
-			'absolute inset-0 z-0 opacity-0 transition-opacity duration-150 hover:opacity-8 focus-visible:opacity-10 active:opacity-10':
-				true,
+			'absolute inset-0 z-0 opacity-0 transition-opacity duration-150 hover:opacity-8 focus-visible:opacity-10 active:opacity-10': true,
 			'bg-primary-default': this.variant === 'surface',
 			'bg-primary-onContainer': this.variant === 'primary',
 			'bg-secondary-onContainer': this.variant === 'secondary',

package/src/form/fields/autocomplete/autocomplete.scss

@@ -13,8 +13,12 @@
 }
 
 @keyframes onAutoFillStart {
-	from {/**/}
-	to {/**/}
+	from {
+		/**/
+	}
+	to {
+		/**/
+	}
 }
 
 sch-input::part(input):-webkit-autofill,