@mhmo91/schmancy 0.10.26 → 0.10.28

package/src/overlay/overlay.confirm-body.ts

@@ -4,13 +4,20 @@ import { customElement, property, query } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
 import { choose } from 'lit/directives/choose.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
+import { gravity } from '../directives/gravity'
+import type SchmancyInput from '../form/fields/input/input'
+
+import '../icons/icon'
+import '../form/fields/input/input'
+import '../typography/typography'
+import '../button/button'
 
 /**
  * Internal body component used by the `confirm()` / `prompt()` sugar.
  *
- * Minimal, dependency-free — plain HTML buttons / input so this file
- * doesn't need to import schmancy-form / schmancy-button (avoids the
- * risk of circular module graphs during early imports of $overlay).
+ * `overlay.service.ts` lazy-imports this body via `await import('./overlay.confirm-body')`
+ * so by mount time `schmancy-button`, `schmancy-input`, `schmancy-typography`,
+ * and `schmancy-icon` are all registered.
  *
  * Emits a `close` CustomEvent with the typed result; the overlay picks
  * that up as the primary return channel. For custom-styled confirms,
@@ -19,17 +26,13 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 @customElement('schmancy-overlay-prompt-body')
 export class SchmancyOverlayPromptBody extends SchmancyElement {
 	static styles = [css`
-	:host {
-		display: block;
-		min-width: 280px;
-		max-width: 480px;
-		color: var(--schmancy-sys-color-on-surface, #1a1a1a);
-	}
-	:host([variant='danger']) .cta-confirm {
-		background: var(--schmancy-sys-color-error, #b3261e);
-		color: var(--schmancy-sys-color-on-error, #ffffff);
-	}
-`]
+		:host {
+			display: block;
+			min-width: 280px;
+			max-width: 480px;
+			padding: 1.5rem;
+		}
+	`]
 
 	@property({ type: String }) heading?: string
 	@property({ type: String }) subtitle?: string
@@ -58,12 +61,11 @@ export class SchmancyOverlayPromptBody extends SchmancyElement {
 	@property({ type: String }) pattern?: string
 	@property({ type: Boolean }) required = false
 
-	@query('input') private _input?: HTMLInputElement
+	@query('schmancy-input') private _schmancyInput?: SchmancyInput
 
 	override firstUpdated(): void {
-		// Focus the confirm button in confirm mode; focus the input in prompt mode.
 		if (this.mode === 'prompt') {
-			queueMicrotask(() => this._input?.focus())
+			this._schmancyInput?.focus()
 		}
 	}
 
@@ -83,9 +85,8 @@ export class SchmancyOverlayPromptBody extends SchmancyElement {
 
 	private handleConfirm = (): void => {
 		if (this.mode === 'prompt') {
-			const input = this._input
-			if (input && !input.reportValidity()) return
-			this.dismiss(input?.value ?? '')
+			if (this._schmancyInput && !this._schmancyInput.reportValidity()) return
+			this.dismiss(this._schmancyInput?.value ?? '')
 		} else {
 			this.dismiss(true)
 		}
@@ -99,53 +100,97 @@ export class SchmancyOverlayPromptBody extends SchmancyElement {
 	protected render(): TemplateResult {
 		return html`
 			<form @submit=${this.handleSubmit}>
-				${when(
-					this.heading,
-					() => html`<h2 class="text-lg font-semibold mb-1">${this.heading}</h2>`,
-				)}
-				${when(
-					this.subtitle,
-					() => html`<p class="text-sm opacity-70 mb-2">${this.subtitle}</p>`,
-				)}
-				${choose(
-					this.mode,
-					[
+				<div class="flex flex-col gap-3">
+					${when(
+						this.variant === 'danger',
+						() => html`
+							<schmancy-icon
+								${gravity({ delay: 0, mass: 0.7 })}
+								class="text-error-default"
+								style="font-size:32px"
+							>error_outline</schmancy-icon>
+						`,
+					)}
+
+					${when(
+						this.heading,
+						() => html`
+							<schmancy-typography
+								${gravity({ delay: 0, mass: 0.8 })}
+								type="headline"
+								token="sm"
+							>${this.heading}</schmancy-typography>
+						`,
+					)}
+
+					${when(
+						this.subtitle,
+						() => html`
+							<schmancy-typography
+								${gravity({ delay: 60, mass: 0.9 })}
+								type="body"
+								token="md"
+								class="opacity-70"
+							>${this.subtitle}</schmancy-typography>
+						`,
+					)}
+
+					${choose(
+						this.mode,
 						[
-							'prompt',
-							() => html`
-								${when(this.label, () => html`<label class="block text-sm mb-1">${this.label}</label>`)}
-								<input
-									type=${this.inputType}
-									.value=${this.defaultValue}
-									placeholder=${ifDefined(this.placeholder)}
-									pattern=${ifDefined(this.pattern)}
-									?required=${this.required}
-									class="w-full px-3 py-2 rounded-md border border-outline-variant text-base mb-2"
-								/>
-								${when(
-									this.message,
-									() => html`<p class="text-sm mb-3">${this.message}</p>`,
-								)}
-							`,
+							[
+								'prompt',
+								() => html`
+									<schmancy-input
+										${gravity({ delay: 120, mass: 1.0 })}
+										.label=${this.label ?? ''}
+										.value=${this.defaultValue}
+										.type=${this.inputType}
+										placeholder=${ifDefined(this.placeholder)}
+										pattern=${ifDefined(this.pattern)}
+										.required=${this.required}
+									></schmancy-input>
+									${when(
+										this.message,
+										() => html`
+											<schmancy-typography
+												${gravity({ delay: 180, mass: 1.0 })}
+												type="body"
+												token="sm"
+												class="opacity-70"
+											>${this.message}</schmancy-typography>
+										`,
+									)}
+								`,
+							],
 						],
-					],
-					() => html`${when(this.message, () => html`<p class="text-sm mb-4">${this.message}</p>`)}`,
-				)}
+						() => html`
+							${when(
+								this.message,
+								() => html`
+									<schmancy-typography
+										${gravity({ delay: 60, mass: 0.9 })}
+										type="body"
+										token="md"
+										class="opacity-70"
+									>${this.message}</schmancy-typography>
+								`,
+							)}
+						`,
+					)}
+				</div>
 
-				<div class="flex justify-end gap-2 mt-4">
-					<button
+				<div ${gravity({ delay: 180, mass: 1.0 })} class="flex justify-end gap-2 mt-6">
+					<schmancy-button
 						type="button"
+						variant="text"
 						@click=${this.handleCancel}
-						class="px-4 py-2 rounded-md bg-transparent cursor-pointer hover:bg-surface-on/5"
-					>
-						${this.cancelText}
-					</button>
-					<button
+					>${this.cancelText}</schmancy-button>
+					<schmancy-button
 						type="submit"
-						class="cta-confirm px-4 py-2 rounded-md border-0 bg-primary text-on-primary cursor-pointer font-medium"
-					>
-						${this.confirmText}
-					</button>
+						variant="filled"
+						color=${this.variant === 'danger' ? 'error' : 'primary'}
+					>${this.confirmText}</schmancy-button>
 				</div>
 			</form>
 		`

package/src/overlay/overlay.service.ts

@@ -5,17 +5,20 @@ import {
 	distinctUntilChanged,
 	EMPTY,
 	filter,
+	finalize,
 	firstValueFrom,
+	from,
 	fromEvent,
+	ignoreElements,
 	map,
 	merge,
 	Observable,
-	Subject,
 	switchMap,
 	take,
-	takeUntil,
+	tap,
 } from 'rxjs'
 import type { THistoryStrategy } from '../area/router.types'
+import { discoverComponent } from '../discovery/discovery.service'
 import { SchmancyOverlay } from './overlay.component'
 import {
 	clearStack,
@@ -140,116 +143,86 @@ export function show<T = void>(
 	options: ShowOptions = {},
 ): Observable<T | undefined> {
 	return defer(() => {
-		// Resolve anchor at subscribe time: caller's explicit anchor wins,
-		// otherwise the ambient gesture captured by ambientAnchor$ fills in.
+		// Resolve anchor + theme container at subscribe time. Anchor: caller's
+		// explicit value wins, otherwise the ambient gesture fills in. Theme:
+		// dispatch `schmancy-theme-where-are-you` via the discovery service so
+		// the overlay mounts inside the nearest <schmancy-theme> and inherits
+		// its --schmancy-* tokens (same mechanism the old $dialog used). Falls
+		// back to body when no theme responds.
 		const resolvedOptions: ShowOptions = {
 			...options,
 			anchor: options.anchor ?? ambientAnchor(),
 		}
-
-		return new Observable<T | undefined>((subscriber) => {
-			let el: SchmancyOverlay | null = null
-			let entry: OverlayEntry | null = null
-			let historyPushed = false
-			let settled = false
-
-			const teardown$ = new Subject<void>()
-
-			const mount = async () => {
-				try {
-					// Create and append the overlay element.
-					el = document.createElement('schmancy-overlay') as SchmancyOverlay
-					;(document.body ?? document.documentElement).appendChild(el)
-					await el.updateComplete
-
-					// Open it — mount content, resolve layout, animate in.
-					await el.open(content, resolvedOptions)
-
-					// Register with the stack (post-open so layout, modal, tier are all
-					// resolved by the element).
-					const id = generateId()
-					entry = {
-						id,
-						element: el,
-						layout: el.layout,
-						modal: el.modal,
-						tier: el.tier,
-					}
-					pushEntry(entry)
-
-					// Register modality for the stack-aware inert manager when modal.
-					if (el.modal && el.parentElement) {
-						markModal(id, el)
-					}
-
-					// History integration — push a sentinel unless silent.
-					const strategy: THistoryStrategy = resolvedOptions.historyStrategy ?? 'push'
-					if (strategy === 'push') {
-						history.pushState({ __schmancyOverlayId: id }, '', location.href)
-						historyPushed = true
-					} else if (strategy === 'replace') {
-						history.replaceState({ __schmancyOverlayId: id }, '', location.href)
-					}
-
-					// popstate — close this overlay when the user hits back past us.
-					// If another overlay's popstate fires first, that's fine; each overlay
-					// handles its own via this listener.
-					if (historyPushed) {
-						fromEvent<PopStateEvent>(window, 'popstate')
-							.pipe(take(1), takeUntil(teardown$))
-							.subscribe(() => {
-								// Avoid double-pop on teardown — set settled so the
-								// teardown fn doesn't call history.back() again.
-								settled = true
-								void el?.close('popstate')
-							})
-					}
-
-					// Subscribe to the element's internal close$ — the single source of
-					// truth for lifecycle completion. Emits reason + optional result.
-					el.closed$.pipe(take(1), takeUntil(teardown$)).subscribe(({ result }) => {
-						settled = true
-						subscriber.next(result as T | undefined)
-						subscriber.complete()
-					})
-				} catch (err) {
-					subscriber.error(err)
-				}
-			}
-
-			void mount()
-
-			return () => {
-				teardown$.next()
-				teardown$.complete()
-
-				// Unsubscribe path — caller cancelled. Tear down the overlay.
-				if (el && !settled) {
-					void el.close('programmatic')
-				}
-
-				// Clean up registry entries.
-				if (entry) {
-					unmarkModal(entry.id)
-					removeEntry(entry.id)
-				}
-
-				// Pop history if we pushed one and it's still current.
-				if (historyPushed && !settled) {
-					// Check before calling — if the user already popped, this is a noop.
-					if (history.state?.__schmancyOverlayId === entry?.id) {
-						history.back()
-					}
-					historyPushed = false
-				}
-
-				// Remove element after exit animation has had a chance to play.
-				queueMicrotask(() => {
-					el?.remove()
-					el = null
-				})
-			}
-		})
+		const id = generateId()
+		const state = { settled: false, historyPushed: false }
+
+		return discoverComponent<HTMLElement>('schmancy-theme').pipe(
+			switchMap((theme) => {
+				const el = document.createElement('schmancy-overlay') as SchmancyOverlay
+				;(theme ?? document.body ?? document.documentElement).appendChild(el)
+
+				const opened$ = from(
+					el.updateComplete.then(() => el.open(content, resolvedOptions)),
+				).pipe(
+					tap(() => {
+						pushEntry({
+							id,
+							element: el,
+							layout: el.layout,
+							modal: el.modal,
+							tier: el.tier,
+						})
+						if (el.modal && el.parentElement) markModal(id, el)
+
+						const strategy: THistoryStrategy = resolvedOptions.historyStrategy ?? 'push'
+						if (strategy === 'push') {
+							history.pushState({ __schmancyOverlayId: id }, '', location.href)
+							state.historyPushed = true
+						} else if (strategy === 'replace') {
+							history.replaceState({ __schmancyOverlayId: id }, '', location.href)
+						}
+					}),
+				)
+
+				// popstate side-channel — listened only after history.pushState
+				// completed inside opened$'s tap. ignoreElements keeps the merge
+				// emitting only the eventual close result.
+				const popstateClose$ = fromEvent<PopStateEvent>(window, 'popstate').pipe(
+					take(1),
+					filter(() => state.historyPushed),
+					tap(() => {
+						state.settled = true
+						void el.close('popstate')
+					}),
+					ignoreElements(),
+				)
+
+				const closed$ = el.closed$.pipe(
+					take(1),
+					tap(() => {
+						state.settled = true
+					}),
+					map(({ result }) => result as T | undefined),
+				)
+
+				return opened$.pipe(
+					switchMap(() => merge(closed$, popstateClose$).pipe(take(1))),
+					finalize(() => {
+						if (!state.settled) void el.close('programmatic')
+						unmarkModal(id)
+						removeEntry(id)
+						if (
+							state.historyPushed &&
+							!state.settled &&
+							history.state?.__schmancyOverlayId === id
+						) {
+							history.back()
+						}
+						queueMicrotask(() => el.remove())
+					}),
+				)
+			}),
+		)
 	})
 }
 

package/src/surface/surface.styles.ts

@@ -179,22 +179,6 @@ export const surfaceTypeStyles = css`
 	   ================================================================ */
 `
 
-/**
- * Surface fill styles - dimension control
- */
-export const surfaceFillStyles = css`
-	:host([fill='all']) {
-		height: 100%;
-		width: 100%;
-	}
-	:host([fill='width']) {
-		width: 100%;
-	}
-	:host([fill='height']) {
-		height: 100%;
-	}
-`
-
 /**
  * Surface rounded corner styles
  */
@@ -283,7 +267,6 @@ export const surfaceClickableStyles = css`
  */
 export const surfaceStyles = css`
 	${surfaceTypeStyles}
-	${surfaceFillStyles}
 	${surfaceRoundedStyles}
 	${surfaceElevationStyles}
 	${surfaceClickableStyles}

package/src/surface/surface.ts

@@ -7,16 +7,14 @@ import { customElement, property } from 'lit/decorators.js'
 
 export const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')
 
-// Re-export types for backwards compatibility
-export type { SchmancySurfaceFill, SchmancySurfaceRounded, SchmancySurfaceElevation } from '@mixins/surface.mixin'
+export type { SchmancySurfaceRounded, SchmancySurfaceElevation } from '@mixins/surface.mixin'
 
 /**
  * `<schmancy-surface>` component
  *
- * This component renders a styled container that adapts its dimensions based on the `fill` property.
- * It supports various rounding options, elevation levels, and applies background and text color classes
- * based on the specified surface variant. Additionally, when the `scroller` property is true, the component
- * enables internal scrolling by applying overflow and scroll-behavior styles.
+ * Styled container that supports rounding, elevation, and background/text color variants.
+ * Sizing is the consumer's responsibility — use Tailwind utilities (`class="w-full h-full"`)
+ * on the element directly.
  *
  * SurfaceMixin automatically provides surfaceStyles CSS.
  *
@@ -24,7 +22,7 @@ export type { SchmancySurfaceFill, SchmancySurfaceRounded, SchmancySurfaceElevat
  * @slot - Default slot for projecting child content.
  *
  * @example
- * <schmancy-surface fill="all" rounded="all" elevation="3" type="surfaceBright" scroller>
+ * <schmancy-surface class="w-full h-full" rounded="all" elevation="3" type="surfaceBright" scroller>
  *   <p>Your scrollable content here</p>
  * </schmancy-surface>
  */

package/types/mixins/surface.mixin.d.ts

@@ -1,11 +1,9 @@
 import type { Constructor } from './constructor';
 import { LitElement } from 'lit';
 import type { TSurfaceColor } from '../src/types/surface';
-export type SchmancySurfaceFill = 'all' | 'width' | 'height' | 'auto';
 export type SchmancySurfaceRounded = 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all';
 export type SchmancySurfaceElevation = 0 | 1 | 2 | 3 | 4 | 5;
 export declare class ISurfaceMixin {
-    fill: SchmancySurfaceFill;
     rounded: SchmancySurfaceRounded;
     elevation: SchmancySurfaceElevation;
     type: TSurfaceColor;
@@ -18,7 +16,6 @@ export declare class ISurfaceMixin {
  * This is the recommended pattern for mixins that need to add styles.
  *
  * Provides these reflected properties:
- * - `fill`: 'all' | 'width' | 'height' | 'auto' - Controls element dimensions
  * - `rounded`: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' - Corner rounding
  * - `elevation`: 0-5 - Shadow depth level
  * - `type`: TSurfaceColor - Surface color variant (26+ options)

package/types/src/form/fields/date-range/date-range-dialog.d.ts

@@ -13,6 +13,7 @@ import { PresetCategory } from './date-range-presets';
  * @element schmancy-date-range-dialog
  */
 export declare class SchmancyDateRangeDialog extends SchmancyElement {
+    static styles: import("lit").CSSResult[];
     type: 'date' | 'datetime-local';
     dateFrom: {
         label: string;

package/types/src/list/list.d.ts

@@ -1,5 +1,4 @@
 import { SchmancyElement } from '@mixins/index';
-import { SchmancySurfaceFill } from '@schmancy/surface';
 import { TSurfaceColor } from '@schmancy/types/surface';
 /**
  * `<schmancy-list>` component.
@@ -27,14 +26,6 @@ export declare class List extends SchmancyElement {
      * @default 'surface'
      */
     surface: TSurfaceColor;
-    /**
-     * Determines the fill style of the underlying surface.
-     *
-     * @attr fill
-     * @type {SchmancySurfaceFill}
-     * @default 'auto'
-     */
-    fill: SchmancySurfaceFill;
     /**
      * Defines the elevation level of the surface.
      *

package/types/src/navigation-rail/navigation-rail.d.ts

@@ -14,6 +14,19 @@ export type LabelVisibility = 'all' | 'selected' | 'none';
  * Navigation rails provide access to between 3-7 primary destinations with a compact footprint.
  * Automatically hides in fullscreen mode when triggered via schmancyTheme.next({ fullscreen: true }).
  *
+ * ## Layout composition
+ * Place layout utilities directly on the host element. They are forwarded to the
+ * items container `<div part="items">` (the direct flat-tree parent of slotted items,
+ * placed inside `<schmancy-scroll>`). When no layout utilities are present on the host,
+ * the items container defaults to `flex flex-col gap-3` plus the `justify-*` class
+ * driven by the `alignment` property.
+ *
+ *   <schmancy-navigation-rail class="grid gap-2">…</schmancy-navigation-rail>
+ *   → items container <div>: `grid gap-2`
+ *
+ *   <schmancy-navigation-rail>…</schmancy-navigation-rail>
+ *   → items container <div>: `flex flex-col gap-3 justify-start`
+ *
  * @element schmancy-navigation-rail
  * @slot fab - Slot for a floating action button at the top
  * @slot menu - Slot for a menu icon or button below the FAB
@@ -27,7 +40,8 @@ export type LabelVisibility = 'all' | 'selected' | 'none';
  *
  * @csspart rail - The main rail container
  * @csspart header - The header section
- * @csspart nav - The navigation items container
+ * @csspart nav - The navigation scroll region (contains items)
+ * @csspart items - The direct layout container for slotted items (inside schmancy-scroll)
  * @csspart footer - The footer section
  *
  * @example
@@ -89,6 +103,12 @@ export declare class SchmancyNavigationRail extends SchmancyElement {
     private focusedIndex;
     private hasHeaderContent;
     private isFullscreen;
+    /**
+     * Layout-related classes extracted from the host's `class` attribute.
+     * Forwarded verbatim to the inner `<nav>` element.
+     * When empty, the nav falls back to the M3 default: `flex flex-col gap-3`.
+     */
+    private _hostLayoutClasses;
     private allElements;
     private get navigationItems();
     connectedCallback(): void;